@quillsql/react 2.12.36 → 2.12.37

package/dist/esm/ChartBuilder.js

@@ -1,1312 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState, useContext, useMemo, } from 'react';
-import { ClientContext, DashboardContext, DashboardDataContext, DashboardFiltersContext, SchemaContext, ThemeContext, } from './Context';
-import { getData, getDataFromCloud } from './utils/dataFetcher';
-import { PivotModal, generatePivotTable, isDateField, } from './internals/ReportBuilder/PivotModal';
-import { PivotCard } from './internals/ReportBuilder/PivotList';
-import { ChartDisplay } from './Chart';
-import { MemoizedModal, QuillTextInput, MemoizedButton, MemoizedSecondaryButton, MemoizedHeader, MemoizedLabel, MemoizedDeleteButton, MemoizedText, MemoizedPopover, QuillTableComponent, QuillChartBuilderInputRowContainer, QuillChartBuilderInputColumnContainer, MemoizedSubHeader, QuillErrorMessageComponent, QuillPivotRowContainer, QuillPivotColumnContainer, QuillChartBuilderFormContainer, QuillLoadingComponent, } from './components/UiComponents';
-import { mergeComparisonRange } from './utils/merge';
-import { removeDoubleQuotes, snakeAndCamelCaseToTitleCase, } from './utils/textProcessing';
-import { QuillSelectComponent } from './components/QuillSelect';
-import { QuillCard } from './components/QuillCard';
-import { quillFormat } from './utils/valueFormatter';
-import { convertColumnInfoToColumnInternal, convertFieldTypeToJSType, } from './utils/columnProcessing';
-import { createTableNameToTableAliasMap, getColumnsByTableFromASTAndSchema, getSelectFromAST, } from './utils/astProcessing';
-import { getSchemaInfoWithCustomFields } from './utils/schema';
-import { getDateBucketFromRange } from './utils/dates';
-import { validateReport } from './utils/validation';
-import { QuillChartErrorWithAction } from './components/Chart/ChartError';
-import { convertInternalReportToReport } from './utils/report';
-const CHART_TYPES = ['column', 'line', 'table', 'metric', 'bar', 'pie'];
-const POSTGRES_DATE_TYPES = [
-    'timestamp',
-    'date',
-    'timestamptz',
-    'time',
-    'timetz',
-];
-const CHART_TO_LABELS = {
-    column: { xAxisLabel: 'X-Axis', yAxisLabel: 'Y-Axis' },
-    line: { xAxisLabel: 'X-Axis', yAxisLabel: 'Y-Axis' },
-    table: {},
-    metric: { xAxisLabel: 'Value' },
-    bar: { xAxisLabel: 'X-Axis', yAxisLabel: 'Y-Axis' },
-    pie: { xAxisLabel: 'Category', yAxisLabel: 'Count' },
-};
-function getPivotMetricOptions(pivot) {
-    if (!pivot.rowField) {
-        return [
-            {
-                label: `Pivot Value (${pivot.valueField})`,
-                value: pivot.valueField,
-            },
-        ];
-    }
-    else {
-        return [
-            {
-                label: `Pivot Row (${pivot.rowField})`,
-                value: pivot.rowField,
-            },
-        ];
-    }
-}
-export function createInitialFormData(columns) {
-    const firstNumberColumn = columns?.find((col) => numberFormatOptions.includes(col.format));
-    const formEmptyState = {
-        name: 'My Chart',
-        columns: columns.map((col) => {
-            return { ...col, label: snakeAndCamelCaseToTitleCase(col.label) };
-        }),
-        xAxisField: columns?.[0]?.field || '',
-        xAxisFormat: columns?.[0]?.format || 'whole_number',
-        yAxisFields: [
-            {
-                field: firstNumberColumn?.field || columns?.[0]?.field || '',
-                label: '',
-                format: firstNumberColumn?.format || columns?.[0]?.format || 'string',
-            },
-        ],
-        xAxisLabel: '',
-        chartType: firstNumberColumn ? 'line' : 'table',
-        pivot: null,
-        dateField: { table: '', field: '' },
-        template: false,
-    };
-    return formEmptyState;
-}
-function getChartTypeOptions(formData, dashboard) {
-    let viableCharts = CHART_TYPES;
-    if (dashboard.dateFilter && dashboard.dateFilter.comparison) {
-        viableCharts = viableCharts.filter((chart) => !['table', 'metric', 'bar', 'pie'].includes(chart));
-    }
-    if (formData.pivot && !formData.pivot.rowField) {
-        return viableCharts
-            .filter((elem) => elem === 'metric' || elem === 'table')
-            .map((elem) => ({
-            label: elem,
-            value: elem,
-        }));
-    }
-    else {
-        return viableCharts
-            .filter((elem) => !((formData.pivot && elem === 'metric') ||
-            (formData.pivot &&
-                formData.pivot.columnField &&
-                (elem === 'bar' || elem === 'pie'))))
-            .map((elem) => ({ label: elem, value: elem }));
-    }
-}
-function getTablesHelper(ast, allTables) {
-    const tableAliasMap = createTableNameToTableAliasMap(ast);
-    const tablesInQuery = Object.values(tableAliasMap);
-    // Remove all aliased tables (with statements and subqueries)
-    const onlyReferenceTables = allTables
-        .filter((table) => tablesInQuery.includes(table.displayName))
-        .map((table) => table.displayName);
-    let referencedColumns = {};
-    // Get non with statement column references
-    referencedColumns = getColumnsByTableFromASTAndSchema(ast, allTables, tableAliasMap);
-    // With statement column references
-    if (ast.with) {
-        for (const withStmt of ast.with) {
-            const astFrom = withStmt.stmt.from ?? withStmt.stmt.ast.from;
-            if (astFrom) {
-                const withReferencedColumns = getColumnsByTableFromASTAndSchema(withStmt.stmt.ast ?? withStmt.stmt, allTables, tableAliasMap);
-                // @ts-ignore
-                Object.keys(withReferencedColumns).forEach((tableName) => {
-                    if (referencedColumns[tableName]) {
-                        // @ts-ignore
-                        referencedColumns[tableName].push(...(withReferencedColumns[tableName] || []));
-                    }
-                    else {
-                        // @ts-ignore
-                        referencedColumns[tableName] = withReferencedColumns[tableName];
-                    }
-                });
-            }
-        }
-    }
-    // Make all the column strings unique
-    for (const table in referencedColumns) {
-        referencedColumns[table] = Array.from(new Set(referencedColumns[table]));
-    }
-    const referencedTablesAndColumns = Object.keys(referencedColumns).map((tableName) => {
-        return {
-            name: tableName,
-            columns: referencedColumns[tableName]?.map((column) => {
-                return { field: column };
-            }) || [],
-        };
-    });
-    const dateFields = allTables
-        .filter((table) => onlyReferenceTables.includes(table.displayName))
-        .map((table) => {
-        return {
-            name: table.displayName,
-            columns: table.columns
-                .filter((column) => POSTGRES_DATE_TYPES.includes(column.fieldType))
-                .map((col) => {
-                return convertColumnInfoToColumnInternal(col);
-            }),
-        };
-    });
-    return { referencedTablesAndColumns, dateFields };
-}
-async function getReferencedTables(client, sqlQuery, dbTables) {
-    const resp = await getDataFromCloud(client, `astify`, {
-        query: sqlQuery,
-        useNewNodeSql: true,
-    });
-    if (resp.success === false) {
-        return getTablesHelper(getSelectFromAST({}), dbTables);
-    }
-    return getTablesHelper(getSelectFromAST(resp.ast), dbTables);
-}
-function createReportFromForm(formData, report, selectedPivotTable, rows = []) {
-    return convertInternalReportToReport({
-        ...formData,
-        dashboardName: formData.dashboardName || '',
-        pivot: formData.pivot,
-        id: '',
-        order: -1,
-        compareRows: report?.compareRows || [],
-        filtersApplied: report?.filtersApplied || [],
-        queryString: '',
-        rows: selectedPivotTable?.rows ?? rows,
-        rowCount: report?.rowCount || selectedPivotTable?.rows?.length || rows.length || 0,
-        yAxisFields: formData.yAxisFields ?? [],
-        pivotColumns: selectedPivotTable?.columns ?? undefined,
-        pivotRows: selectedPivotTable?.rows ?? undefined,
-    });
-}
-export const numberFormatOptions = [
-    'whole_number',
-    'one_decimal_place',
-    'two_decimal_places',
-    'dollar_amount',
-    'dollar_cents',
-];
-export const dateFormatOptions = [
-    'MMM_yyyy',
-    'MMM_dd',
-    'MMM_dd_yyyy',
-    'MMM_dd_hh:mm_ap_pm',
-    'hh_ap_pm',
-    'date',
-];
-const NUMBER_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' },
-];
-const DATE_OPTIONS = [
-    { value: 'MMM_yyyy', label: 'month' },
-    { value: 'MMM_dd', label: 'day' },
-    { value: 'MMM_dd_yyyy', label: 'day and year' },
-    { value: 'MMM_dd_hh:mm_ap_pm', label: 'day and time' },
-    { value: 'hh_ap_pm', label: 'hour' },
-];
-const formatOptions = [
-    ...NUMBER_OPTIONS,
-    ...DATE_OPTIONS,
-    { value: 'percent', label: 'percent' },
-    { value: 'string', label: 'string' },
-];
-/**
- * ### Quill Chart Builder with Modal
- *
- * Renders a ChartBuilder component with a modal.
- *
- * @example
- * ```js
- * // Usage without custom components
- * <ChartBuilder />
- * ```
- *
- * @example
- * ```js
- * // You can also pass your own components
- * <ChartBuilder
- *   ButtonComponent={MyButton}
- *   SecondaryButtonComponent={MySecondaryButton}
- * />
- * ```
- *
- * ### Chart Builder API
- * @see https://docs.quillsql.com/components/chart-builder#with-modal
- */
-export function ChartBuilderWithModal(props) {
-    const parentRef = useRef(null);
-    const [modalWidth, setModalWidth] = useState(200);
-    const [modalHeight, setModalHeight] = useState(200);
-    const { isOpen, setIsOpen, title, isHorizontalView } = props;
-    const Modal = props.ModalComponent ?? MemoizedModal;
-    useEffect(() => {
-        function handleResize() {
-            const screenSize = window.innerWidth;
-            if (screenSize >= 1200) {
-                setModalWidth(window.innerWidth - 80);
-            }
-            else {
-                setModalWidth(undefined); // use dynamic width of contents
-            }
-            setModalHeight(window.innerHeight - 80);
-        }
-        handleResize();
-        window.addEventListener('resize', handleResize);
-        return () => {
-            window.removeEventListener('resize', handleResize);
-        };
-    }, []);
-    return (_jsx("div", { style: { height: '100%' }, ref: parentRef, children: _jsx(Modal, { isOpen: isOpen, setIsOpen: setIsOpen, title: title || 'Add to dashboard', 
-            // For isHorizontalView, use full viewport size minus 80px for padding,
-            // otherwise use the default layout method of the modal (contents).
-            width: isHorizontalView ? modalWidth : undefined, height: isHorizontalView ? modalHeight : undefined, children: _jsx(ChartBuilder, { ...props }) }) }));
-}
-/**
- * ### Quill Chart Builder
- *
- * A simple form that lets users turn a SQL query into a chart, metric, or table
- * and then add that dashboard item into one of their dashboards.
- *
- * @example
- * ```js
- * // Usage without custom components
- * <ChartBuilder />
- * ```
- *
- * @example
- * ```js
- * // You can also pass your own components
- * <ChartBuilder
- *   ButtonComponent={MyButton}
- *   SecondaryButtonComponent={MySecondaryButton}
- * />
- * ```
- *
- * ### Chart Builder API
- * @see https://docs.quillsql.com/components/chart-builder
- */
-export default function ChartBuilder({ TextInputComponent = QuillTextInput, SelectComponent = QuillSelectComponent, ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, HeaderComponent = MemoizedHeader, SubHeaderComponent = MemoizedSubHeader, LabelComponent = MemoizedLabel, DeleteButtonComponent = MemoizedDeleteButton, TextComponent = MemoizedText, PopoverComponent = MemoizedPopover, CardComponent = QuillCard, TableComponent = QuillTableComponent, ModalComponent = MemoizedModal, LoadingComponent = QuillLoadingComponent, ErrorMessageComponent = QuillErrorMessageComponent, ChartBuilderInputRowContainer = QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = QuillChartBuilderInputColumnContainer, PivotRowContainer = QuillPivotRowContainer, PivotColumnContainer = QuillPivotColumnContainer, FormContainer = QuillChartBuilderFormContainer, ErrorComponent = QuillChartErrorWithAction, onClickChartError, isOpen, isHorizontalView = true, pivot, setIsOpen, rows, columns, query, queryNoDateColumn, dateRange: dr, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, showDashboardDropdown = true, onAddToDashboardComplete, onDelete, report = undefined, recommendedPivots: rp = [], createdPivots: cp = [], destinationDashboard, dateColumn, buttonLabel, organizationName, pivotData, hideDeleteButton = false, hideSubmitButton = false, hideDateRangeFilter = false, initialUniqueValues, pivotRecommendationsEnabled = true, onSortChange, onPageChange, rowCount, isLoading, isComparison, onClickChartElement, }) {
-    const dateRange = dr;
-    const [client] = useContext(ClientContext);
-    const [theme] = useContext(ThemeContext);
-    const [schema, setSchema] = useContext(SchemaContext);
-    const [windowWidth, setWindowWidth] = useState(1200);
-    const [isSubmitting, setIsSubmitting] = useState(false);
-    const [pivotCardWidth, setPivotCardWidth] = useState(665);
-    const [chartTypes, setChartTypes] = useState(CHART_TYPES.map((type) => {
-        return { label: type, value: type };
-    }));
-    const [formWidth, setFormWidth] = useState(665);
-    const inputRef = useRef(null);
-    const selectRef = useRef(null);
-    const [, dispatch] = useContext(DashboardContext);
-    const [processedColumns, setProcessedColumns] = useState(columns);
-    const parentRef = useRef(null);
-    const deleteRef = useRef(null);
-    const modalPadding = 20;
-    const deleteButtonMargin = -12;
-    const validationHelper = (formData, dashboard, dateField, tables) => {
-        const issues = validateReport(formData, dashboard, dateField || defaultDateField, tables || allTables);
-        if (issues.length > 0) {
-            setFilterIssues(issues);
-        }
-        else {
-            setFilterIssues([]);
-        }
-    };
-    useEffect(() => {
-        if (schema) {
-            const newProcessedColumns = columns.map((col) => {
-                if (col.jsType) {
-                    return col;
-                }
-                const newCol = { ...col };
-                let foundColumn;
-                schema.forEach((table) => {
-                    if (table.columns) {
-                        const matchedColumn = table.columns.find((c) => c.name === col.field);
-                        if (matchedColumn) {
-                            foundColumn = matchedColumn;
-                        }
-                    }
-                });
-                if (!foundColumn) {
-                    return col;
-                }
-                newCol.fieldType = foundColumn.fieldType;
-                newCol.jsType = convertFieldTypeToJSType(foundColumn.fieldType);
-                return newCol;
-            });
-            setProcessedColumns(newProcessedColumns);
-        }
-    }, [schema]);
-    useEffect(() => {
-        const handleResize = () => setWindowWidth(window.innerWidth);
-        handleResize();
-        window.addEventListener('resize', handleResize);
-        return () => {
-            window.removeEventListener('resize', handleResize);
-        };
-    }, []);
-    useEffect(() => {
-        const handleResize = () => {
-            // The pivot card should be the same width as the row of inputs
-            // above it (an input, two selects, plus the gaps between them).
-            if (inputRef.current && selectRef.current) {
-                const inputSize = inputRef.current?.getBoundingClientRect();
-                const selectSize = selectRef.current?.getBoundingClientRect();
-                const selectWidth = selectSize.width;
-                const showDash = showDashboardDropdown && !destinationDashboard;
-                const spaceBetween = selectSize.left - inputSize.right;
-                const gap = showDash ? (spaceBetween - selectWidth) / 2 : spaceBetween;
-                const width = inputSize.width + 2 * gap + 2 * selectWidth;
-                setPivotCardWidth(width);
-                // Calculate the form width by adding the width of the delete button
-                const deleteSize = deleteRef.current?.getBoundingClientRect();
-                const deleteWidth = deleteSize?.width ?? 0;
-                setFormWidth(width + deleteWidth);
-            }
-        };
-        handleResize();
-    }, [isOpen]);
-    useEffect(() => {
-        const handleResize = () => {
-            // The pivot card should be the same width as the row of inputs
-            // above it (an input, two selects, plus the gaps between them).
-            if (inputRef.current && selectRef.current) {
-                const inputSize = inputRef.current?.getBoundingClientRect();
-                const selectSize = selectRef.current?.getBoundingClientRect();
-                const selectWidth = selectSize.width;
-                const showDash = showDashboardDropdown && !destinationDashboard;
-                const spaceBetween = selectSize.left - inputSize.right;
-                const gap = showDash ? (spaceBetween - selectWidth) / 2 : spaceBetween;
-                const width = inputSize.width + 2 * gap + 2 * selectWidth;
-                setPivotCardWidth(width);
-                // Calculate the form width by adding the width of the delete button
-                const deleteSize = deleteRef.current?.getBoundingClientRect();
-                const deleteWidth = deleteSize?.width ?? 0;
-                setFormWidth(width + deleteWidth);
-            }
-        };
-        handleResize();
-        window.addEventListener('resize', handleResize);
-        return () => {
-            window.removeEventListener('resize', handleResize);
-        };
-    }, []);
-    // get dashboards
-    const [dashboardOptions, setDashboardOptions] = useState([]);
-    const [defaultDashboardName, setDefaultDashboardName] = useState(destinationDashboard || report?.dashboardName || '');
-    const { dashboardFilters } = useContext(DashboardFiltersContext);
-    const { dashboardData } = useContext(DashboardDataContext);
-    const specificDashboardFilter = useMemo(() => {
-        return dashboardFilters.filter((f) => f && defaultDashboardName === f.dashboardName);
-    }, [dashboardFilters]);
-    const [showFilterModal, setShowFilterModal] = useState(false);
-    const [filterIssues, setFilterIssues] = useState([]);
-    const [showPivotPopover, setShowPivotPopover] = useState(false);
-    const [isEdittingPivot, setIsEdittingPivot] = useState(false);
-    const [selectedPivotIndex, setSelectedPivotIndex] = useState(-1);
-    const [tableName, setTableName] = useState(undefined);
-    const selectedTable = schema?.find((t) => t.displayName === tableName);
-    const [pivotPopUpTitle, setPivotPopUpTitle] = useState('Add pivot');
-    const [loadingFormData, setLoadingFormData] = useState(false);
-    const [triggeredEditChart, setTriggeredEditChart] = useState(false);
-    const [createdPivots, setCreatedPivots] = useState(pivot ? [pivot] : report?.pivot ? [report.pivot] : cp);
-    const [recommendedPivots, setRecommendedPivots] = useState(rp);
-    const [pivotRowField, setPivotRowField] = useState(pivot?.rowField);
-    const [pivotColumnField, setPivotColumnField] = useState(pivot?.columnField);
-    const [pivotValueField, setPivotValueField] = useState(pivot?.valueField);
-    const [pivotAggregation, setPivotAggregation] = useState(pivot?.aggregationType);
-    // initial state is the fields array passed in, but can eventually be changed to be the pivot fields
-    const [dateFieldOptions, setDateFieldOptions] = useState([]);
-    const [allTables, setAllTables] = useState([]);
-    const [customFieldTableRef, setCustomFieldTableRef] = useState(false);
-    const [referencedColumns, setReferencedColumns] = useState({});
-    const [defaultDateField, setDefaultDateField] = useState({
-        table: dateFieldOptions[0]?.name || '',
-        field: dateFieldOptions[0]?.columns[0]?.name || '',
-    });
-    const firstNumberColumn = columns?.find((col) => numberFormatOptions.includes(col.format));
-    const formEmptyState = {
-        name: 'My Chart',
-        dashboardName: dashboardOptions[0]?.label || '',
-        columns: columns.map((col) => {
-            return { ...col, label: snakeAndCamelCaseToTitleCase(col.label) };
-        }),
-        xAxisField: columns?.[0]?.field || '',
-        xAxisFormat: columns?.[0]?.format || 'string',
-        yAxisFields: [
-            {
-                field: firstNumberColumn?.field || columns?.[0]?.field || '',
-                label: '',
-                format: firstNumberColumn?.format || columns?.[0]?.format || 'string',
-            },
-        ],
-        xAxisLabel: '',
-        chartType: firstNumberColumn ? 'line' : 'table',
-        pivot: null,
-        dateField: defaultDateField,
-        template: false,
-    };
-    const updateDashboardFilters = async (dashboardName) => {
-        if (dashboardData && dashboardData[dashboardName]) {
-            return dashboardData[dashboardName];
-        }
-        const { queryEndpoint, queryHeaders, publicKey, customerId } = client;
-        if (queryEndpoint) {
-            const response = await fetch(queryEndpoint, {
-                method: 'POST',
-                headers: {
-                    ...queryHeaders,
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    metadata: {
-                        orgId: customerId || '*',
-                        task: 'config',
-                        name: dashboardName,
-                        clientId: publicKey,
-                        databaseType: client.databaseType,
-                        useNewNodeSql: true,
-                    },
-                }),
-                credentials: 'omit', // If withCredentials is true, set to 'include'. Otherwise, set to 'omit'.
-            });
-            const responseData = (await response.json()).data;
-            if (responseData) {
-                return responseData;
-            }
-        }
-    };
-    const pivotFormData = (pivot) => {
-        const yAxisField = pivot.columnField || pivot.valueField;
-        const yAxisLabel = report?.yAxisFields && report?.yAxisFields?.length > 0
-            ? // @ts-ignore
-                report.yAxisFields[0].label
-            : pivot.valueField;
-        // date labels for pivots should be treated like strings since they are
-        const yAxisIsDate = pivot.columnField
-            ? isDateField(pivot.columnFieldType || '')
-            : false;
-        const chartType = report?.chartType ?? (pivot.rowField ? 'column' : 'metric');
-        return {
-            pivot,
-            chartType: chartType,
-            xAxisField: pivot.rowField ? pivot.rowField : pivot.valueField,
-            xAxisFormat: isDateField(pivot.rowFieldType)
-                ? 'string'
-                : columns.find((col) => col.field === pivot.rowField)?.format ||
-                    report?.xAxisFormat ||
-                    'whole_number',
-            xAxisLabel: report?.xAxisLabel || pivot.rowField,
-            yAxisFields: [
-                {
-                    field: yAxisField,
-                    label: yAxisLabel,
-                    format: yAxisIsDate
-                        ? 'string'
-                        : report?.yAxisFields && report?.yAxisFields?.length > 0
-                            ? // @ts-ignore
-                                report?.yAxisFields[0].format
-                            : columns.find((col) => col.field === pivot.valueField)?.format ||
-                                'whole_number',
-                },
-            ],
-        };
-    };
-    const formFormDataFromReport = (report) => {
-        let pivotData = {};
-        let dateField = defaultDateField;
-        if (pivot) {
-            pivotData = pivotFormData(pivot);
-        }
-        if (report) {
-            dateField = report.dateField || defaultDateField;
-        }
-        return {
-            ...formEmptyState,
-            ...report,
-            ...pivotData,
-            ...(destinationDashboard && { dashboardName: destinationDashboard }),
-            dateField: dateField,
-        };
-    };
-    const [formData, setFormData] = useState(formFormDataFromReport(report));
-    useEffect(() => {
-        if (!loadingFormData && triggeredEditChart) {
-            editChart();
-        }
-    }, [loadingFormData]);
-    useEffect(() => {
-        async function getFormData() {
-            setLoadingFormData(true);
-            const curFormData = formData;
-            let dashNames = Object.keys(dashboardData).map((dashboard) => {
-                return dashboard;
-            }) ?? [];
-            if (dashNames.length === 0) {
-                const resp = await getDataFromCloud(client, `dashnames/${client.publicKey}/`, null, 'GET');
-                dashNames = resp.dashboardNames;
-            }
-            let dashboardOptions = dashNames
-                .filter((elem) => elem !== null)
-                .map((key) => ({ label: key, value: key }));
-            if (!dashboardOptions.length) {
-                dashboardOptions = [
-                    { label: 'New - Dashboard', value: 'New - Dashboard' },
-                ];
-            }
-            if (destinationDashboard) {
-                dashboardOptions = [
-                    { label: destinationDashboard, value: destinationDashboard },
-                ];
-            }
-            let dashboardName = report?.dashboardName
-                ? report.dashboardName
-                : dashboardOptions[0]?.label || '';
-            if (destinationDashboard) {
-                dashboardName = destinationDashboard;
-            }
-            const curDashboard = await updateDashboardFilters(dashboardName);
-            setDashboardOptions(dashboardOptions);
-            curFormData.dashboardName = dashboardName;
-            setDefaultDashboardName(dashboardName ??
-                (report ? report?.dashboardName : dashboardOptions[0]?.label));
-            let curSchemaData = schema;
-            if (!curSchemaData || curSchemaData.length === 0) {
-                const { schemaData } = await getSchemaInfoWithCustomFields(client, 'cb');
-                curSchemaData = schemaData;
-                setSchema(curSchemaData);
-            }
-            if (!query) {
-                setLoadingFormData(false);
-                return;
-            }
-            const result = await getReferencedTables(client, query, curSchemaData);
-            setDateFieldOptions(result.dateFields);
-            if (result.dateFields[0] && result.dateFields[0].columns[0]) {
-                setDefaultDateField({
-                    table: result.dateFields[0].name,
-                    field: result.dateFields[0].columns[0].field,
-                });
-            }
-            // check if the referenced table is a table with custom field info.. If so block template settings
-            const tableNames = result.referencedTablesAndColumns.map((table) => table.name);
-            setAllTables(tableNames);
-            let customFieldUsage = false;
-            for (const table of tableNames) {
-                const tableInfo = curSchemaData.find((elem) => elem.name === table);
-                if (tableInfo?.customFieldInfo) {
-                    customFieldUsage = true;
-                    break;
-                }
-            }
-            setCustomFieldTableRef(customFieldUsage && client.customerId && client.customerId !== '*');
-            const referencedColumns = result.referencedTablesAndColumns.reduce((acc, table) => {
-                acc[table.name] = table.columns.map((col) => col.field);
-                return acc;
-            }, {});
-            setReferencedColumns(referencedColumns);
-            setTableName(result.dateFields[0]?.name);
-            const dateField = {
-                table: result.dateFields[0]?.name || '',
-                field: result.dateFields[0]?.columns?.find((elem) => elem.field === dateColumn)?.field || '',
-            };
-            let isTemplate = curFormData.template;
-            if (customFieldUsage) {
-                isTemplate = false;
-            }
-            curFormData.dashboardName =
-                report && report.dashboardName
-                    ? report?.dashboardName
-                    : dashboardOptions[0]?.label;
-            curFormData.template = isTemplate;
-            if (!curFormData.dateField) {
-                curFormData.dateField = { field: '', table: '' };
-            }
-            if (!curFormData.dateField.field || !curFormData.dateField.table) {
-                if (dateField && dateField.field) {
-                    curFormData.dateField = dateField;
-                }
-            }
-            setFormData(curFormData);
-            validationHelper(curFormData, curDashboard, curFormData.dateField ?? dateField, tableNames);
-            setLoadingFormData(false);
-        }
-        getFormData();
-    }, []);
-    const [selectedPivotTable, setSelectedPivotTable] = useState(pivotData || undefined);
-    const fetchPivotData = async (pivot, uniqueValues, overrideDateRange) => {
-        if (pivot && rows) {
-            const dateFilter = report
-                ? report.filtersApplied.find((filter) => {
-                    return filter.filterType === 'date_range';
-                })
-                : undefined;
-            let dateBucket = undefined;
-            if (overrideDateRange) {
-                dateBucket = getDateBucketFromRange(overrideDateRange);
-            }
-            setSelectedPivotTable(await generatePivotTable(pivot, rows, overrideDateRange ?? dateRange, isComparison ?? false, -1, dateFilter ? dateFilter.comparisonRange : undefined, dateBucket, report, client, uniqueValues));
-        }
-        else {
-            setSelectedPivotTable(undefined);
-        }
-    };
-    const formattedRows = useMemo(() => {
-        if (selectedPivotTable &&
-            selectedPivotTable.columns &&
-            formData.chartType === 'table') {
-            const columns = selectedPivotTable.columns;
-            columns.forEach((col, index) => {
-                // ADD THE RIGHT FIELD TYPE FOR THE VALUE COLUMNS
-                if ((formData.pivot?.valueFieldType ||
-                    ['min', 'max'].includes(formData.pivot?.aggregationType || '')) &&
-                    index !== 0) {
-                    col.format = formData?.pivot?.valueFieldType || 'two_decimal_places';
-                }
-            });
-            return selectedPivotTable.rows.map((row) => {
-                return columns.reduce((formattedRow, column) => {
-                    // Apply the format function to each field in the row
-                    const formattedValue = quillFormat({
-                        value: row[column.field],
-                        format: column.format,
-                    });
-                    formattedRow[column.field] = formattedValue;
-                    return formattedRow;
-                }, {});
-            });
-        }
-        else {
-            if (!rows)
-                return [];
-            return rows.map((row) => {
-                return formData.columns.reduce((formattedRow, column) => {
-                    // Apply the format function to each field in the row
-                    const formattedValue = quillFormat({
-                        value: row[column.field],
-                        format: column.format,
-                    });
-                    formattedRow[column.field] = formattedValue;
-                    return formattedRow;
-                }, {});
-            });
-        }
-    }, [
-        selectedPivotTable,
-        formData.columns,
-        formData.chartType,
-        rows,
-        formData.pivot,
-    ]);
-    const handleChange = async (value, fieldName, index) => {
-        let updatedForm = { ...formData };
-        try {
-            // WE NEED TO REPROCESS THE PIVOT TABLE IF THE PIVOT COLUMN CHANGES
-            // WE NEED TO UPDATE BOTH VALUEFIELDTYPE AND COLUMN FIELD TYPES
-            if (fieldName === 'pivotColumn') {
-                // CAN'T EDIT THE TYPE OF THE RowField
-                if (index === 0) {
-                    return;
-                }
-                const updatedPivot = {
-                    ...formData.pivot,
-                    valueFieldType: value,
-                };
-                // @ts-ignore
-                updatedForm.pivot = updatedPivot;
-            }
-            else if (index !== undefined) {
-                // For dynamic array fields
-                const [field, subfield] = fieldName.split('.');
-                // @ts-ignore
-                const updatedArray = formData[field].map((item, i) => i === index ? { ...item, [subfield]: value } : item);
-                updatedForm = { ...formData, [field]: updatedArray };
-                setFormData({ ...formData, [field]: updatedArray });
-            }
-            else if (fieldName.includes('.')) {
-                // For nested fields
-                const [field, subfield] = fieldName.split('.');
-                if (field === 'pivot' && subfield !== '') {
-                    const subfieldTypeFieldName = subfield + 'Type';
-                    if (value.length) {
-                        const subFieldType = columns.find((columns) => columns.field === value).fieldType;
-                        updatedForm = {
-                            ...updatedForm,
-                            // @ts-ignore
-                            [field]: {
-                                ...updatedForm[field],
-                                [subfield]: value,
-                                [subfieldTypeFieldName]: subFieldType,
-                            },
-                        };
-                    }
-                    else {
-                        updatedForm = {
-                            ...formData,
-                            // @ts-ignore
-                            [field]: {
-                                ...formData[field],
-                                [subfield]: '',
-                                [subfieldTypeFieldName]: '',
-                            },
-                        };
-                    }
-                }
-                else if (field === 'dateField' &&
-                    subfield === 'table' &&
-                    !formData.dateField.field) {
-                    const field = schema?.find((elem) => elem.name === value)
-                        ?.columns?.[0]?.name;
-                    updatedForm.dateField = {
-                        // @ts-ignore
-                        ...updatedForm[field],
-                        [subfield]: value,
-                        field: field,
-                    };
-                }
-                updatedForm = {
-                    ...updatedForm,
-                    // @ts-ignore
-                    [field]: { ...updatedForm[field], [subfield]: value },
-                };
-            }
-            else {
-                // For simple fields
-                updatedForm = { ...updatedForm, [fieldName]: value };
-            }
-            let dashboardName = updatedForm.dashboardName;
-            if (fieldName === 'dashboardName') {
-                dashboardName = value;
-            }
-            validationHelper(updatedForm, dashboardData[dashboardName || '']);
-            setChartTypes(getChartTypeOptions(updatedForm, dashboardData[dashboardName || '']));
-        }
-        catch (e) {
-            updatedForm = { ...updatedForm, [fieldName]: value };
-        }
-        setFormData(updatedForm);
-    };
-    const handleAddPivot = async (pivot, uniqueValues, dateRange, pivotData) => {
-        const newPivotFormData = pivotFormData(pivot);
-        // Only keep the old chart type if the shapes of the pivots are the same
-        // since the valid chart types for some pivots might have changed (eg. going
-        // from a 1D pivot to a 2D pivot would make bar lists not an option).
-        // They don't have to have the same value, just same 'truthiness'.
-        const isPivotSameShape = Boolean(formData.pivot?.rowField) === Boolean(pivot.rowField) &&
-            Boolean(formData.pivot?.columnField) === Boolean(pivot.columnField);
-        const isNewChartType = formData.chartType !== newPivotFormData.chartType;
-        const keepOldChartType = isNewChartType && isPivotSameShape;
-        if (pivotData) {
-            setSelectedPivotTable({
-                rows: pivotData.rows,
-                columns: pivotData.columns,
-            });
-        }
-        else {
-            await fetchPivotData(pivot, uniqueValues, dateRange);
-        }
-        setFormData((formData) => ({
-            ...formData,
-            ...newPivotFormData,
-            ...(keepOldChartType && { chartType: formData.chartType }),
-        }));
-    };
-    const handleDeletePivot = () => {
-        if (!formData.pivot) {
-            return;
-        }
-        setFormData({
-            ...formEmptyState,
-            dashboardName: formData.dashboardName,
-            pivot: null,
-        });
-        setSelectedPivotTable(undefined);
-    };
-    const handleAddField = (fieldName) => {
-        if (fieldName === 'columns') {
-            setFormData({
-                ...formData,
-                // @ts-ignore
-                columns: [...formData.columns, { label: '', field: '', format: '' }],
-            });
-        }
-        else if (fieldName === 'yAxisFields') {
-            setFormData({
-                ...formData,
-                yAxisFields: [
-                    ...formData.yAxisFields,
-                    // @ts-ignore
-                    { label: '', field: '', chartType: '', format: '' },
-                ],
-            });
-        }
-        else if (fieldName === 'pivot') {
-            setFormData({
-                ...formData,
-                pivot: {
-                    title: '',
-                    rowField: '',
-                    rowFieldType: '',
-                    columnField: '',
-                    columnFieldType: '',
-                    valueField: '',
-                    aggregationType: 'sum',
-                },
-            });
-        }
-    };
-    const handleRemoveField = (fieldName, index) => {
-        if (fieldName === 'pivot') {
-            setFormData({
-                ...formData,
-                pivot: null,
-            });
-            return;
-        }
-        // @ts-ignore
-        const updatedArray = formData[fieldName].filter((_, i) => i !== index);
-        setFormData({ ...formData, [fieldName]: updatedArray });
-    };
-    const handleSubmit = (event) => {
-        event.preventDefault();
-    };
-    const deleteChart = async () => {
-        if (!report?.id || !client) {
-            return;
-        }
-        const { publicKey, customerId } = client;
-        const cloudBody = {
-            dashboardItemId: report.id,
-        };
-        const searchParams = new URLSearchParams(customerId
-            ? {
-                clientId: publicKey,
-                customerId: customerId,
-            }
-            : { clientId: publicKey }).toString();
-        const resp = await getDataFromCloud(client, `deletedash/${publicKey}/${customerId}/?${searchParams}`, cloudBody);
-        if (resp) {
-            if (onDelete) {
-                onDelete();
-            }
-        }
-        setIsOpen(false);
-        setIsSubmitting(false);
-    };
-    const editChart = async () => {
-        if (isSubmitting) {
-            setTriggeredEditChart(false);
-            return;
-        }
-        setIsSubmitting(true);
-        const { publicKey, customerId, databaseType } = client;
-        if (!client) {
-            setTriggeredEditChart(false);
-            return;
-        }
-        // If the dashbaordItem is a template but the editor isn't an admin, create a new dashboardItem and set the template to false
-        let dashboardItemId = report ? report.id : undefined;
-        if (report && !showAccessControlOptions && formData.template) {
-            dashboardItemId = undefined;
-        }
-        const cloudBody = {
-            ...formData,
-            ...(formData.dateField?.table
-                ? {}
-                : { dateField: { ...defaultDateField } }),
-            ...(formData.dashboardName
-                ? {}
-                : { dashboardName: defaultDashboardName }),
-            dashboardItemId,
-            query: queryNoDateColumn || query,
-            queryString: queryNoDateColumn || query,
-            pivot: formData.pivot,
-            referencedTables: allTables,
-            referencedColumns,
-            template: report && !showAccessControlOptions && formData.template
-                ? false
-                : formData.template,
-            customerId: customerId || '*',
-            useNewNodeSql: true,
-        };
-        // @ts-ignore
-        if (cloudBody['rows']) {
-            // @ts-ignore
-            delete cloudBody['rows'];
-            // @ts-ignore
-            delete cloudBody['compareRows'];
-        }
-        // add orgId: customerId if present for hostedBody
-        // set defaultDateField if date field not present
-        const hostedBody = {
-            metadata: {
-                task: 'create',
-                clientId: publicKey,
-                databaseType: databaseType,
-                ...cloudBody,
-                orgId: customerId || '*',
-                useNewNodeSql: true,
-            },
-        };
-        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 && resp.name !== 'error') {
-            if (resp.compareRows) {
-                mergeComparisonRange(resp);
-            }
-            dispatch({
-                type: 'UPDATE_DASHBOARD_ITEM',
-                id: resp._id,
-                data: {
-                    ...resp,
-                    rows,
-                    columns,
-                    pivotRows: selectedPivotTable?.rows || undefined,
-                    pivotColumns: selectedPivotTable?.columns || undefined,
-                    filtersApplied: specificDashboardFilter,
-                    triggerReload: true,
-                },
-            });
-        }
-        setIsOpen(false);
-        setIsSubmitting(false);
-        setTriggeredEditChart(false);
-        if (onAddToDashboardComplete) {
-            onAddToDashboardComplete({
-                ...resp,
-                rows,
-                columns,
-                filtersApplied: specificDashboardFilter,
-            });
-        }
-    };
-    // Prevent horizontal view on small screens.
-    isHorizontalView = windowWidth < 1200 ? false : isHorizontalView;
-    if (!schema) {
-        return null;
-    }
-    return (_jsxs("div", { style: {
-            width: '100%',
-            height: '100%',
-            display: 'flex',
-            flexDirection: 'column',
-            flexGrow: 1,
-        }, children: [_jsxs("div", { id: "quill-chart-modal", style: {
-                    width: '100%',
-                    height: '100%',
-                    maxWidth: '100%',
-                    display: 'flex',
-                    padding: modalPadding,
-                    gap: '20px',
-                    flexDirection: isHorizontalView ? 'row' : 'column',
-                    boxSizing: 'border-box',
-                }, children: [_jsxs("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            gap: '20px',
-                            height: isHorizontalView || !isOpen ? '100%' : 800,
-                            ...(isHorizontalView && {
-                                flexGrow: 1,
-                                maxWidth: !isOpen ? '100%' : `calc(100% - ${formWidth}px - 20px)`, // width of left sidebar plus gap
-                            }),
-                            ...(!isHorizontalView && isOpen && { width: formWidth }),
-                        }, children: [report?.adminError || report?.error ? (_jsx(ErrorComponent, { label: report.adminError || report.error, onClick: onClickChartError })) : (((!isHorizontalView && windowWidth >= 1200) ||
-                                formData.chartType !== 'table') && (_jsx(ChartDisplay, { reportId: report ? report.id : undefined, config: createReportFromForm(formData, report, selectedPivotTable, rows), scrollable: true, colors: theme.chartColors, loading: isLoading ? true : false, hideDateRangeFilter: hideDateRangeFilter, containerStyle: {
-                                    width: '100%',
-                                    height: formData.chartType === 'metric'
-                                        ? 100
-                                        : isHorizontalView || !isOpen
-                                            ? showTableFormatOptions
-                                                ? 'calc(50% - 10px)'
-                                                : 'calc(100% - 10px)'
-                                            : 400,
-                                    ...(isHorizontalView && { flexGrow: 1 }),
-                                }, onClickChartElement: onClickChartElement }))), 
-                            // Make sure to display non-pivoted table when using pivot chart
-                            showTableFormatOptions &&
-                                (isHorizontalView || (!isOpen && windowWidth < 1200)) && (_jsx("div", { style: {
-                                    width: '100%',
-                                    height: isHorizontalView || !isOpen ? 'calc(50% - 10px)' : 400,
-                                    flexGrow: 1,
-                                }, children: formData.chartType !== 'table' ? (_jsx(TableComponent, { rows: formattedRows, columns: formData.columns, onPageChange: (page) => {
-                                        onPageChange && onPageChange(page);
-                                    }, onSortChange: (sort) => {
-                                        onSortChange && onSortChange(sort);
-                                    }, rowCount: rowCount, isLoading: isLoading })) : (_jsx(TableComponent, { rows: formattedRows, columns: selectedPivotTable
-                                        ? selectedPivotTable.columns
-                                        : formData.columns, onPageChange: (page) => {
-                                        onPageChange && onPageChange(page);
-                                    }, onSortChange: (sort) => {
-                                        onSortChange && onSortChange(sort);
-                                    }, rowCount: rowCount, isLoading: isLoading })) }))] }), isOpen && (_jsxs("form", { ref: parentRef, id: "quill-chart-form", onSubmit: handleSubmit, style: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            gap: 20,
-                            ...(isHorizontalView && {
-                                height: '100%',
-                                minWidth: formWidth,
-                                maxWidth: formWidth,
-                                width: formWidth,
-                            }),
-                            ...(windowWidth < 1200 && {
-                                width: formWidth,
-                                paddingTop: modalPadding,
-                                paddingBottom: modalPadding,
-                            }),
-                        }, children: [_jsxs(FormContainer, { children: [_jsxs(ChartBuilderInputRowContainer, { children: [_jsx("div", { ref: inputRef, style: { display: 'flex', flexDirection: 'column' }, children: _jsx(TextInputComponent, { id: "chart-builder-name", label: "Name", width: 200, value: formData.name, onChange: (e) => handleChange(e.target.value, 'name'), placeholder: "Name" }) }), showDashboardDropdown && !destinationDashboard && (_jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: _jsx(SelectComponent, { label: "Dashboard", value: formData.dashboardName || '', onChange: async (e) => {
-                                                        handleChange(e.target.value, 'dashboardName');
-                                                        await updateDashboardFilters(e.target.value);
-                                                    }, options: dashboardOptions.map((elem) => ({
-                                                        label: elem.label,
-                                                        value: elem.label,
-                                                    })), width: 200 }) })), _jsx("div", { ref: selectRef, style: { display: 'flex', flexDirection: 'column' }, children: _jsx(SelectComponent, { label: "Chart type", value: formData.chartType, onChange: (e) => handleChange(e.target.value, 'chartType'), 
-                                                    // filter out metric for all pivots
-                                                    // filter out bar and pie for row and column pivot
-                                                    options: chartTypes, width: 200 }) })] }), _jsxs("div", { style: {
-                                            display: 'flex',
-                                            flexDirection: 'column',
-                                            gap: 6,
-                                        }, children: [_jsx(HeaderComponent, { label: "Pivot" }), _jsxs("div", { style: { fontFamily: theme?.fontFamily }, children: [_jsx("div", { style: {
-                                                            maxWidth: 200,
-                                                            // marginTop: 6,
-                                                            display: 'flex',
-                                                            flexDirection: 'column',
-                                                        }, children: _jsx(PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: selectedTable, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, CardComponent: CardComponent, SecondaryButtonComponent: SecondaryButtonComponent, PopoverComponent: PopoverComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, LoadingComponent: LoadingComponent, theme: theme, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: processedColumns, triggerButtonText: 'Add pivot +', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: handleDeletePivot, selectPivot: handleAddPivot, dateRange: dateRange, selectPivotOnEdit: true, showTrigger: !formData.pivot, query: query, pivotCountRequest: 4, initialUniqueValues: initialUniqueValues, initialSelectedPivotTable: selectedPivotTable, pivotRecommendationsEnabled: pivotRecommendationsEnabled, report: report }) }), formData.pivot && selectedPivotTable && (_jsx("div", { children: _jsx("div", { style: { width: pivotCardWidth }, children: _jsx(PivotCard, { pivotTable: {
-                                                                    pivot: formData.pivot,
-                                                                    rows: selectedPivotTable?.rows,
-                                                                    columns: selectedPivotTable?.columns,
-                                                                }, theme: theme, index: 0, onSelectPivot: () => {
-                                                                    setIsEdittingPivot(true);
-                                                                    setShowPivotPopover(true);
-                                                                    setPivotRowField(formData.pivot?.rowField);
-                                                                    setPivotColumnField(formData.pivot?.columnField);
-                                                                    setPivotValueField(formData.pivot?.valueField);
-                                                                    setPivotAggregation(formData.pivot?.aggregationType);
-                                                                    setPivotPopUpTitle('Edit pivot');
-                                                                }, selectedPivotIndex: -1, onEditPivot: () => { }, CardComponent: CardComponent, ButtonComponent: ButtonComponent, HeaderComponent: HeaderComponent, showEdit: false, onClose: handleDeletePivot, minHeight: 180, LabelComponent: LabelComponent, TextComponent: TextComponent }) }) }))] })] }), (formData.pivot || formData.chartType !== 'table') && (_jsxs("div", { children: [CHART_TO_LABELS[formData.chartType]?.xAxisLabel && (_jsx("div", { style: {
-                                                    display: 'flex',
-                                                    flexDirection: 'column',
-                                                }, children: _jsx(HeaderComponent, { label: "Chart" }) })), CHART_TO_LABELS[formData.chartType]?.xAxisLabel && (_jsxs("div", { children: [_jsx(SubHeaderComponent, { label: CHART_TO_LABELS[formData.chartType]?.xAxisLabel ?? '' }), _jsxs(ChartBuilderInputRowContainer, { children: [_jsx(SelectComponent, { value: formData.xAxisField, onChange: (e) => handleChange(e.target.value, 'xAxisField'), options: formData.pivot
-                                                                    ? getPivotMetricOptions(formData.pivot)
-                                                                    : columns.map((elem) => ({
-                                                                        label: elem.field,
-                                                                        value: elem.field,
-                                                                    })), width: 200 }), _jsx(TextInputComponent, { id: "chart-builder-x-axis-label", width: 200, value: formData.xAxisLabel, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'xAxisLabel') }), _jsx(SelectComponent, { value: formData.pivot &&
-                                                                    isDateField(formData.pivot.rowFieldType)
-                                                                    ? 'pivot_date'
-                                                                    : formData.xAxisFormat, onChange: (e) => handleChange(e.target.value, 'xAxisFormat'), options: formData.pivot &&
-                                                                    isDateField(formData.pivot.rowFieldType)
-                                                                    ? [{ value: 'pivot_date', label: 'date' }]
-                                                                    : formatOptions, width: 200 })] })] })), CHART_TO_LABELS[formData.chartType]?.yAxisLabel && (_jsxs("div", { children: [_jsx(SubHeaderComponent, { label: CHART_TO_LABELS[formData.chartType]?.yAxisLabel ?? '' }), _jsxs(ChartBuilderInputColumnContainer, { children: [formData.yAxisFields
-                                                                .filter((yAxisField) => {
-                                                                return !yAxisField.field.startsWith('comparison_');
-                                                            })
-                                                                .map((yAxisField, index) => (_jsxs(ChartBuilderInputRowContainer, { children: [_jsx(SelectComponent, { value: formData.pivot
-                                                                            ? formData.pivot.valueField || 'count'
-                                                                            : yAxisField.field, onChange: (e) => handleChange(e.target.value, 'yAxisFields.field', index), options: formData.pivot
-                                                                            ? [
-                                                                                {
-                                                                                    label: `Pivot Column (${formData.pivot.valueField || 'count'})`,
-                                                                                    value: formData.pivot.valueField ||
-                                                                                        'count',
-                                                                                },
-                                                                            ]
-                                                                            : columns
-                                                                                .filter((elem) => {
-                                                                                return numberFormatOptions.includes(columns.find((col) => col.field === elem.field)?.format || '');
-                                                                            })
-                                                                                .map((elem) => ({
-                                                                                label: elem.field,
-                                                                                value: elem.field,
-                                                                            })), width: 200 }), _jsx(TextInputComponent, { id: "chart-builder-y-axis-label", width: 200, value: yAxisField.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'yAxisFields.label', index) }), _jsx(SelectComponent, { value: formData.pivot
-                                                                            ? NUMBER_OPTIONS.find((option) => {
-                                                                                return (option.value === yAxisField.format);
-                                                                            })
-                                                                                ? // @ts-ignore
-                                                                                    NUMBER_OPTIONS.find((option) => option.value === yAxisField.format).value
-                                                                                : ''
-                                                                            : yAxisField.format, onChange: (e) => handleChange(e.target.value, 'yAxisFields.format', index), options: formData.pivot
-                                                                            ? NUMBER_OPTIONS
-                                                                            : formatOptions, width: 200 }), formData.pivot === null && (_jsx("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: _jsx(DeleteButtonComponent, { onClick: () => handleRemoveField('yAxisFields', index) }) }))] }, 'yAxisField' + index))), formData.pivot === null && (_jsx("div", { children: _jsx(SecondaryButtonComponent, { onClick: () => handleAddField('yAxisFields'), label: "Add field +" }) }))] })] }))] })), showTableFormatOptions && windowWidth < 1200 && (_jsx("div", { style: {
-                                            width: '100%',
-                                            height: isHorizontalView || !isOpen ? 'calc(50% - 10px)' : 400,
-                                            flexGrow: 1,
-                                        }, children: formData.chartType !== 'table' ? (_jsx(TableComponent, { rows: formattedRows, columns: formData.columns, onPageChange: (page) => {
-                                                onPageChange && onPageChange(page);
-                                            }, onSortChange: (sort) => {
-                                                onSortChange && onSortChange(sort);
-                                            }, rowCount: rowCount, isLoading: isLoading })) : (_jsx(TableComponent, { rows: formattedRows, columns: selectedPivotTable
-                                                ? selectedPivotTable.columns
-                                                : formData.columns, onPageChange: (page) => {
-                                                onPageChange && onPageChange(page);
-                                            }, onSortChange: (sort) => {
-                                                onSortChange && onSortChange(sort);
-                                            }, rowCount: rowCount, isLoading: isLoading })) })), showTableFormatOptions && (_jsxs("div", { children: [_jsxs("div", { style: {
-                                                    display: 'flex',
-                                                    flexDirection: 'column',
-                                                }, children: [_jsx(HeaderComponent, { label: "Table" }), _jsx(SubHeaderComponent, { label: "Columns" })] }), _jsxs(ChartBuilderInputColumnContainer, { children: [formData.pivot &&
-                                                        selectedPivotTable &&
-                                                        selectedPivotTable.columns &&
-                                                        formData.chartType === 'table'
-                                                        ? // THIS CASE IF FOR PIVOT TABLES ONLY
-                                                            selectedPivotTable.columns.map((column, index) => (_jsxs(ChartBuilderInputRowContainer, { children: [_jsx(SelectComponent, { value: column.label, onChange: (e) => handleChange(e.target.value, 'columns.field', index), options: selectedPivotTable.columns.map((elem) => ({
-                                                                            label: elem.label,
-                                                                            value: elem.label,
-                                                                        })), width: 200 }), _jsx(TextInputComponent, { id: `chart-builder-column-label-${index}`, width: 200, value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'columns.label', index) }), _jsx(SelectComponent, { value: 
-                                                                        // The first index use rowField for the rest of them use value fields
-                                                                        formData.pivot &&
-                                                                            column.field === formData.pivot.rowField
-                                                                            ? formData.pivot &&
-                                                                                isDateField(formData.pivot.rowFieldType)
-                                                                                ? 'pivot_date'
-                                                                                : 'string'
-                                                                            : formData.pivot?.valueFieldType ||
-                                                                                'two_decimal_places', onChange: (e) => handleChange(e.target.value, 'pivotColumn', index), options: formData.pivot && index === 0
-                                                                            ? isDateField(formData.pivot.rowFieldType)
-                                                                                ? [{ label: 'date', value: 'pivot_date' }]
-                                                                                : [{ label: 'string', value: 'string' }]
-                                                                            : [...NUMBER_OPTIONS], width: 200 })] }, 'column' + index)))
-                                                        : formData.columns.map((column, index) => (_jsxs(ChartBuilderInputRowContainer, { children: [_jsx(SelectComponent, { value: column.field, onChange: (e) => handleChange(e.target.value, 'columns.field', index), options: columns.map((elem) => ({
-                                                                        label: elem.field,
-                                                                        value: elem.field,
-                                                                    })), width: 200 }), _jsx(TextInputComponent, { id: `chart-builder-column-label-${index}`, width: 200, value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'columns.label', index) }), _jsx(SelectComponent, { value: column.format, onChange: (e) => handleChange(e.target.value, 'columns.format', index), options: formatOptions, width: 200 }), _jsx("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: _jsx(DeleteButtonComponent, { onClick: () => handleRemoveField('columns', index) }) })] }, 'column' + index))), _jsx("div", { children: !(
-                                                        // hide when pivoted and chartType === 'table'
-                                                        (formData.pivot &&
-                                                            selectedPivotTable &&
-                                                            selectedPivotTable.columns &&
-                                                            formData.chartType === 'table')) && (_jsx(SecondaryButtonComponent, { onClick: () => handleAddField('columns'), label: "Add column +" })) })] })] })), showDateFieldOptions && formData.dateField && (_jsxs("div", { style: {
-                                            display: 'flex',
-                                            flexDirection: 'column',
-                                            gap: 6,
-                                        }, children: [_jsx(HeaderComponent, { label: "Date field" }), _jsxs(ChartBuilderInputRowContainer, { children: [_jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: _jsx(SelectComponent, { label: "Table", value: formData.dateField?.table, onChange: (e) => handleChange(e.target.value, 'dateField.table'), options: dateFieldOptions.map((elem) => ({
-                                                                label: elem.name,
-                                                                value: elem.name,
-                                                            })), width: 200 }) }), _jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: _jsx(SelectComponent, { label: "Field", value: removeDoubleQuotes(formData.dateField?.field), onChange: (e) => handleChange(e.target.value, 'dateField.field'), options: dateFieldOptions
-                                                                ?.find((elem) => elem.name === formData.dateField?.table)
-                                                                ?.columns?.map((elem) => ({
-                                                                label: elem.field,
-                                                                value: elem.field,
-                                                            })) || [], width: 200 }) })] })] })), showAccessControlOptions && (_jsxs("div", { style: {
-                                            display: 'flex',
-                                            flexDirection: 'column',
-                                            gap: 12,
-                                        }, children: [_jsx(HeaderComponent, { label: "Organization access" }), _jsx(SegmentedControl, { onChange: (e) => handleChange(e, 'template'), value: formData.template || !organizationName, theme: theme, organizationName: organizationName, customFieldTableRef: customFieldTableRef })] }))] }), _jsxs("div", { style: {
-                                    display: 'flex',
-                                    flexDirection: 'row',
-                                    justifyContent: 'flex-end',
-                                    marginTop: 'auto',
-                                    gap: 10,
-                                }, children: [!hideDeleteButton && !isHorizontalView && report && (_jsx(SecondaryButtonComponent, { onClick: deleteChart, label: 'Delete' })), !hideSubmitButton && (_jsxs("div", { style: {
-                                            display: 'flex',
-                                            flexDirection: 'row',
-                                            width: '100%',
-                                            justifyContent: 'space-between',
-                                            alignItems: 'center',
-                                            gap: 6,
-                                        }, children: [filterIssues.length === 0 ? (_jsx("div", {})) : (_jsx(ErrorMessageComponent, { errorMessage: filterIssues[0] || 'Dashbord - Report issues', containerStyle: { height: '100%' } })), _jsx(ButtonComponent, { onClick: () => {
-                                                    if (loadingFormData) {
-                                                        setTriggeredEditChart(true);
-                                                    }
-                                                    else {
-                                                        editChart();
-                                                    }
-                                                }, disabled: filterIssues.length !== 0, label: buttonLabel
-                                                    ? buttonLabel
-                                                    : report
-                                                        ? 'Save changes'
-                                                        : 'Add to dashboard' })] }))] })] }))] }), _jsx(DashboardFilterModal, { isOpen: showFilterModal, setIsOpen: setShowFilterModal, issues: filterIssues, ButtonComponent: ButtonComponent, ModalComponent: ModalComponent })] }));
-}
-function SegmentedControl({ onChange, value, theme, organizationName, customFieldTableRef, }) {
-    return (_jsxs("div", { style: {
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            background: '#F5F5F6',
-            maxWidth: organizationName ? 418 : 209,
-            padding: 4,
-            borderRadius: 6,
-        }, children: [!customFieldTableRef && (_jsxs("button", { className: "quill-tab", onClick: () => onChange(true), style: {
-                    border: value === true ? '1px solid #E7E7E7' : '1px solid transparent',
-                    outline: 'none',
-                    width: '100%',
-                    borderRadius: 4,
-                    padding: 10,
-                    boxShadow: value === true
-                        ? '0px 1px 4px 0px rgba(56, 65, 81, 0.08)'
-                        : undefined,
-                    color: value === true ? 'rgba(56, 65, 81, 1)' : 'rgba(56, 65, 81, 0.85)',
-                    fontWeight: value === true ? 600 : 500,
-                    fontSize: 14,
-                    fontFamily: theme?.fontFamily,
-                }, children: [_jsx("style", { children: `
-    .quill-tab {
-        background-color: ${value === true ? 'white' : 'transparent'};
-    }
-    .quill-tab:hover {
-      background-color:  ${value === false ? 'rgba(56, 65, 81, 0.05)' : undefined};
-    }
-    .quill-tab:active {
-      background-color: "rgba(56, 65, 81, 0.15)";
-    }
-` }), 'All Organizations'] })), organizationName && (_jsxs("button", { className: "quill-tab2", onClick: () => onChange(false), style: {
-                    border: value === false ? '1px solid #E7E7E7' : '1px solid transparent',
-                    boxShadow: value === false
-                        ? '0px 1px 4px 0px rgba(56, 65, 81, 0.08)'
-                        : undefined,
-                    outline: 'none',
-                    width: '100%',
-                    borderRadius: 4,
-                    color: value === false
-                        ? 'rgba(56, 65, 81, 1)'
-                        : 'rgba(56, 65, 81, 0.85)',
-                    padding: 10,
-                    fontWeight: value === false ? 600 : 500,
-                    fontSize: 14,
-                    fontFamily: theme?.fontFamily,
-                }, children: [_jsx("style", { children: `
-    .quill-tab2 {
-        background-color: ${value === false ? 'white' : 'transparent'};
-    }
-    .quill-tab2:hover {
-      background-color:  ${value === true ? 'rgba(56, 65, 81, 0.05)' : undefined};
-    }
-    .quill-tab2:focused {
-      background-color: blue;
-    }
-    .quill-tab2:active {
-      background-color: "rgba(56, 65, 81, 0.15)";
-    }
-` }), organizationName] }))] }));
-}
-export function DashboardFilterModal({ isOpen, setIsOpen, issues, ModalComponent = MemoizedModal, ButtonComponent = MemoizedButton, }) {
-    if (!isOpen)
-        return null;
-    return (_jsx(ModalComponent, { isOpen: isOpen, setIsOpen: setIsOpen, title: 'Chart not compatible with selected dashboard', width: 600, children: _jsxs("div", { style: {
-                display: 'flex',
-                flexDirection: 'column',
-                width: '600px',
-                padding: '20px',
-                boxSizing: 'border-box',
-                overflow: 'scroll',
-                maxHeight: 600,
-            }, children: [issues.map((issue) => (_jsx("span", { style: { paddingTop: '10px' }, children: issue }, issue))), _jsx("div", { style: {
-                        display: 'flex',
-                        flexDirection: 'row',
-                        justifyContent: 'flex-end',
-                        paddingTop: '14px',
-                    }, children: _jsx(ButtonComponent, { label: "Got It", onClick: () => setIsOpen(false) }) })] }) }));
-}