@quillsql/react 2.12.37 → 2.12.39

package/dist/esm/ChartBuilder.js

@@ -0,0 +1,1312 @@
+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: true,
+    };
+    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: true,
+    };
+    const updateDashboardFilters = async (dashboardName) => {
+        if (dashboardData && dashboardData[dashboardName]) {
+            return dashboardData[dashboardName];
+        }
+        const { queryEndpoint, queryHeaders, publicKey, customerId, withCredentials, } = 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: withCredentials ? 'include' : '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) }) })] }) }));
+}