@quillsql/react 2.10.30 → 2.10.31

package/dist/esm/ChartBuilder.js

@@ -1,700 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-nocheck
-import { useEffect, useRef, useState, useContext, useMemo } from 'react';
-import { ClientContext, DashboardContext, DashboardFiltersContext, SchemaContext, ThemeContext, } from './Context';
-import { getData, getDataFromCloud } from './utils/dataFetcher';
-import { getPostgresBasicType } from './ReportBuilder';
-import { PivotModal, generatePivotTable, isDateField, } from './internals/ReportBuilder/PivotModal';
-import { PivotCard } from './internals/ReportBuilder/PivotList';
-import Chart from './Chart';
-import { MemoizedModal, MemoizedTextInput, MemoizedSelect, MemoizedButton, MemoizedSecondaryButton, MemoizedHeader, MemoizedLabel, MemoizedDeleteButton, MemoizedText, MemoizedPopover, } from './components/UiComponents';
-import Banner from './components/Banner';
-import { mergeComparisonRange } from './utils/merge';
-const CHART_TYPES = ['column', 'line', 'table', 'metric', 'bar', 'pie'];
-export function snakeCaseToTitleCase(str) {
-    if (!str) {
-        return str;
-    }
-    return str
-        .toString()
-        .split(/_| /)
-        .map((word) => word === 'id'
-        ? 'ID'
-        : word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
-        .join(' ');
-}
-const POSTGRES_DATE_TYPES = [
-    'timestamp',
-    'date',
-    'timestamptz',
-    'time',
-    'timetz',
-];
-function getTablesHelper(ast, allTables) {
-    const tables = [];
-    const withAliases = [];
-    if (ast.with && ast.with.length) {
-        for (let i = 0; i < ast.with.length; i++) {
-            withAliases.push(ast.with[i].name.value);
-            if (ast.with[i]?.stmt?.from) {
-                for (let j = 0; j < ast.with[i].stmt.from.length; j++)
-                    tables.push(ast.with[i].stmt.from[j].table);
-            }
-            if (ast.with[i]?.stmt?.ast?.from) {
-                for (let j = 0; j < ast.with[i].stmt.ast.from.length; j++)
-                    tables.push(ast.with[i].stmt.ast.from[j].table);
-            }
-        }
-    }
-    if (ast.from && ast.from.length) {
-        for (let i = 0; i < ast.from.length; i++) {
-            if (ast.from[i].expr && ast.from[i].expr.ast) {
-                const recursiveAST = ast.from[i].expr.ast;
-                const recursiveTables = getTablesHelper(recursiveAST, allTables);
-                tables.push(...recursiveTables.map((t) => t.name));
-            }
-        }
-    }
-    const astFrom = ast?.from?.filter((t) => t.table).map((elem) => elem.table) || [];
-    const astSelect = ast?.select?.from?.map((elem) => elem.table) || [];
-    const tablesInQuery = [...tables, ...astFrom, ...astSelect].filter((elem) => !withAliases.includes(elem));
-    return allTables
-        .filter((table) => tablesInQuery.includes(table.displayName))
-        .map((table) => {
-        return {
-            name: table.displayName,
-            columns: table.columns.filter((column) => POSTGRES_DATE_TYPES.includes(column.fieldType)),
-        };
-    })
-        .filter((table) => table.columns.length > 0);
-}
-async function getReferencedTables(client, sqlQuery, dbTables) {
-    const resp = await getDataFromCloud(client, `astify`, { query: sqlQuery });
-    return getTablesHelper(resp.ast.length ? resp.ast[0] : resp.ast, dbTables);
-}
-const AGGREGATION_TYPES = [
-    { label: 'sum', value: 'sum' },
-    { label: 'count', value: 'count' },
-    { label: 'average', value: 'avg' },
-];
-export const numberFormatOptions = [
-    'whole_number',
-    'one_decimal_place',
-    'two_decimal_places',
-    'dollar_amount',
-    'dollar_cents',
-];
-const NUMBER_FORMAT_OPTIONS = [
-    { value: 'whole_number', label: 'whole number' },
-    { value: 'one_decimal_place', label: 'one decimal place' },
-    { value: 'two_decimal_places', label: 'two decimal places' },
-    { value: 'dollar_amount', label: 'dollar amount' },
-    { value: 'dollar_cents', label: 'dollar and cent amount' },
-];
-const formatOptions = [
-    ...NUMBER_FORMAT_OPTIONS,
-    { value: 'MMM_yyyy', label: 'month' },
-    { value: 'MMM_dd-MMM_dd', label: 'week' },
-    { value: 'MMM_dd_yyyy', label: 'day' },
-    { value: 'MMM_dd_hh:mm_ap_pm', label: 'day and time' },
-    { value: 'hh_ap_pm', label: 'hour' },
-    { value: 'percent', label: 'percent' },
-    { value: 'string', label: 'string' },
-];
-export default function ChartBuilder(props) {
-    const [theme] = useContext(ThemeContext);
-    return (_jsx(_Fragment, { children: props.Modal ? (_jsx(props.Modal, { isOpen: props.isOpen, setIsOpen: props.setIsOpen, title: props.title || 'Add to dashboard', onClose: () => props.setIsOpen(false), theme: theme, children: _jsx(ChartBuilderForm, { ...props }) })) : (_jsx(MemoizedModal, { setIsOpen: props.setIsOpen, isOpen: props.isOpen, onClose: () => props.setIsOpen(false), title: props.title || 'Add to dashboard', theme: theme, children: _jsx(ChartBuilderForm, { ...props }) })) }));
-}
-function ChartBuilderForm({ TextInput = MemoizedTextInput, Select = MemoizedSelect, Button = MemoizedButton, SecondaryButton = MemoizedSecondaryButton, Header = MemoizedHeader, Label = MemoizedLabel, DeleteButton = MemoizedDeleteButton, Text = MemoizedText, Modal = MemoizedModal, Popover = MemoizedPopover, isOpen, isEditMode, pivot, setIsOpen, rows, columns, query, queryNoDateColumn, dateRange: dr, formHeaderStyle, formLabelStyle, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, showDashboardDropdown = true, onAddToDashboardComplete, onDelete, fields: fieldsProp, dashboardItem = undefined, recommendedPivots: rp = [], createdPivots: cp = [], destinationDashboard, dateColumn, buttonLabel, organizationName, }) {
-    const dateRange = dr || [null, null, null];
-    const [client] = useContext(ClientContext);
-    const [theme] = useContext(ThemeContext);
-    const [schema, setSchema] = useContext(SchemaContext);
-    const [isSubmitting, setIsSubmitting] = useState(false);
-    const [divWidth, setDivWidth] = useState(0);
-    const { dispatch } = useContext(DashboardContext);
-    const fields = fieldsProp?.map((field) => ({
-        field: field.name,
-        type: getPostgresBasicType(field),
-        format: field.format,
-        label: field.name,
-    })) || [];
-    const parentRef = useRef();
-    const deleteRef = useRef();
-    const modalPadding = 20;
-    const deleteButtonMargin = -13;
-    useEffect(() => {
-        const calculateWidth = () => {
-            return (parentRef.current.offsetWidth -
-                (deleteRef?.current
-                    ? deleteRef?.current.offsetWidth - deleteButtonMargin
-                    : 0));
-        };
-        // Measure the width of the div and update state
-        if (parentRef.current) {
-            setDivWidth(calculateWidth());
-        }
-        // Optional: Handle window resize
-        const handleResize = () => {
-            if (parentRef.current) {
-                setDivWidth(calculateWidth());
-            }
-        };
-        window.addEventListener('resize', handleResize);
-        // Cleanup listener
-        return () => {
-            window.removeEventListener('resize', handleResize);
-        };
-    }, []);
-    // get schema
-    useEffect(() => {
-        let isSubscribed = true;
-        async function getSchema() {
-            if (!schema || !schema.length) {
-                const { queryEndpoint, queryHeaders, publicKey } = client;
-                const response = await fetch(`${queryEndpoint}`, {
-                    method: 'POST',
-                    headers: {
-                        ...queryHeaders,
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({
-                        metadata: {
-                            clientId: publicKey,
-                            publicKey: publicKey,
-                            task: 'schema',
-                        },
-                    }),
-                });
-                const results = await response.json();
-                if (isSubscribed) {
-                    if (results.data?.data) {
-                        setSchema(results.data.data.tables);
-                    }
-                    else {
-                        setSchema(results.data.tables);
-                    }
-                }
-            }
-        }
-        if (isSubscribed) {
-            getSchema();
-        }
-        return () => {
-            isSubscribed = false;
-        };
-    }, [schema]);
-    // get dashboards
-    const [dashboardOptions, setDashboardOptions] = useState([]);
-    const [defaultDashboardName, setDefaultDashboardName] = useState(destinationDashboard ||
-        dashboardItem?.dashboardName ||
-        dashboardOptions[0]?.label);
-    useEffect(() => {
-        if (!destinationDashboard &&
-            !dashboardItem &&
-            dashboardOptions &&
-            dashboardOptions.length) {
-            setDefaultDashboardName(dashboardOptions[0]?.label);
-        }
-    }, [dashboardOptions]);
-    useEffect(() => {
-        async function getDashNames() {
-            const resp = await getDataFromCloud(client, `dashnames/${client.publicKey}/`, null, 'GET');
-            setDashboardOptions(resp.dashboardNames
-                .filter((elem) => elem !== null)
-                .map((key) => ({ label: key, value: key })));
-        }
-        getDashNames();
-    }, []);
-    const { dashboardFilters } = useContext(DashboardFiltersContext);
-    const [showPivotPopover, setShowPivotPopover] = useState(false);
-    const [isEdittingPivot, setIsEdittingPivot] = useState(false);
-    const [selectedPivotIndex, setSelectedPivotIndex] = useState(-1);
-    const [tableName, setTableName] = useState(null);
-    const selectedTable = schema?.find((t) => t.displayName === tableName);
-    const [pivotPopUpTitle, setPivotPopUpTitle] = useState('Add Pivot');
-    const [createdPivots, setCreatedPivots] = useState(pivot ? [pivot] : dashboardItem?.pivot ? [dashboardItem.pivot] : cp);
-    const [recommendedPivots, setRecommendedPivots] = useState(rp);
-    const [pivotRowField, setPivotRowField] = useState(undefined);
-    const [pivotColumnField, setPivotColumnField] = useState(undefined);
-    const [pivotValueField, setPivotValueField] = useState(undefined);
-    const [pivotAggregation, setPivotAggregation] = useState(undefined);
-    // initial state is the fields array passed in, but can eventually be changed to be the pivot fields
-    const [fieldOptions, setFieldOptions] = useState(fields);
-    const [dateFieldOptions, setDateFieldOptions] = useState([]);
-    useEffect(() => {
-        const fetchReferencedTables = async () => {
-            if (!query) {
-                return;
-            }
-            const result = await getReferencedTables(client, query, schema);
-            setDateFieldOptions(result);
-            setTableName(result[0]?.name);
-            if (!formData.dateField.table) {
-                setFormData({
-                    ...formData,
-                    dateField: {
-                        table: result[0]?.name,
-                        field: result[0]?.columns?.find((elem) => elem.name === dateColumn)
-                            ?.name || result[0]?.columns[0]?.name,
-                    },
-                });
-            }
-        };
-        fetchReferencedTables();
-    }, [query, schema]);
-    const defaultDateField = {
-        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: snakeCaseToTitleCase(col.label) };
-        }),
-        xAxisField: columns?.[0]?.field || '',
-        xAxisFormat: columns?.[0]?.format || '',
-        yAxisFields: [
-            {
-                field: firstNumberColumn?.field || columns?.[0]?.field || '',
-                label: '',
-                format: firstNumberColumn?.format || columns?.[0]?.field || '',
-            },
-        ],
-        xAxisLabel: '',
-        chartType: firstNumberColumn ? 'line' : 'table',
-        pivot: null,
-        dateField: defaultDateField,
-        template: false,
-    };
-    const pivotFormData = (pivot) => {
-        const yAxisField = pivot.columnField || pivot.valueField;
-        // date labels for pivots should be treated like strings since they are
-        // formatted in generatePivotTable
-        const yAxisIsDate = pivot.columnField
-            ? isDateField(pivot.columnFieldType)
-            : false;
-        return {
-            pivot,
-            chartType: 'column',
-            xAxisField: pivot.rowField,
-            xAxisFormat: isDateField(pivot.rowFieldType)
-                ? 'string'
-                : columns.find((col) => col.field === pivot.rowField)?.format ||
-                    'whole_number',
-            xAxisLabel: '',
-            yAxisFields: [
-                {
-                    field: yAxisField,
-                    label: '',
-                    format: yAxisIsDate
-                        ? 'string'
-                        : columns.find((col) => col.field === yAxisField)?.format ||
-                            'whole_number',
-                },
-            ],
-        };
-    };
-    const [formData, setFormData] = useState(pivot
-        ? { ...formEmptyState, ...pivotFormData(pivot) }
-        : dashboardItem || formEmptyState);
-    const selectedPivotTable = useMemo(() => {
-        if (formData.pivot && rows) {
-            return generatePivotTable(formData.pivot, rows, dateRange);
-        }
-        else {
-            return {};
-        }
-    }, [formData.pivot, rows]);
-    const handleChange = (value, fieldName, index) => {
-        if (index !== undefined) {
-            // For dynamic array fields
-            const [field, subfield] = fieldName.split('.');
-            const updatedArray = formData[field].map((item, i) => i === index ? { ...item, [subfield]: value } : item);
-            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 = fields.find((field) => field.field === value).type;
-                    setFormData({
-                        ...formData,
-                        [field]: {
-                            ...formData[field],
-                            [subfield]: value,
-                            [subfieldTypeFieldName]: subfieldType,
-                        },
-                    });
-                    return;
-                }
-                else {
-                    setFormData({
-                        ...formData,
-                        [field]: {
-                            ...formData[field],
-                            [subfield]: '',
-                            [subfieldTypeFieldName]: '',
-                        },
-                    });
-                    return;
-                }
-            }
-            if (field === 'dateField' &&
-                subfield === 'table' &&
-                !formData.dateField.field) {
-                const field = schema?.find((elem) => elem.name === value)?.columns?.[0]
-                    ?.name;
-                setFormData({
-                    ...formData,
-                    dateField: { ...formData[field], [subfield]: value, field: field },
-                });
-                return;
-            }
-            setFormData({
-                ...formData,
-                [field]: { ...formData[field], [subfield]: value },
-            });
-        }
-        else {
-            // For simple fields
-            setFormData({ ...formData, [fieldName]: value });
-        }
-    };
-    const handleAddPivot = (pivot, index) => {
-        setFormData((formData) => ({
-            ...formData,
-            ...pivotFormData(pivot),
-        }));
-    };
-    const handleDeletePivot = () => {
-        if (!formData.pivot) {
-            return;
-        }
-        setFormData({ ...formEmptyState, pivot: null });
-    };
-    const handleAddField = (fieldName) => {
-        if (fieldName === 'columns') {
-            setFormData({
-                ...formData,
-                columns: [...formData.columns, { label: '', field: '', format: '' }],
-            });
-        }
-        else if (fieldName === 'yAxisFields') {
-            setFormData({
-                ...formData,
-                yAxisFields: [
-                    ...formData.yAxisFields,
-                    { label: '', field: '', chartType: '', format: '' },
-                ],
-            });
-        }
-        else if (fieldName === 'pivot') {
-            setFormData({
-                ...formData,
-                pivot: {
-                    rowField: '',
-                    rowFieldType: '',
-                    columnField: '',
-                    columnFieldType: '',
-                    valueField: '',
-                    aggregationType: '',
-                },
-            });
-        }
-    };
-    const handleRemoveField = (fieldName, index) => {
-        if (fieldName === 'pivot') {
-            setFormData({
-                ...formData,
-                pivot: null,
-            });
-            return;
-        }
-        const updatedArray = formData[fieldName].filter((_, i) => i !== index);
-        setFormData({ ...formData, [fieldName]: updatedArray });
-    };
-    const handleSubmit = (e) => {
-        e.preventDefault();
-    };
-    const deleteChart = async () => {
-        if (!dashboardItem._id || !client) {
-            return;
-        }
-        const { publicKey, customerId } = client;
-        const cloudBody = {
-            dashboardItemId: dashboardItem._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 (_e) => {
-        if (isSubmitting) {
-            return;
-        }
-        setIsSubmitting(true);
-        const { publicKey, customerId, databaseType } = client;
-        if (!client) {
-            return;
-        }
-        const cloudBody = {
-            ...formData,
-            ...(formData.dateField?.table
-                ? {}
-                : { dateField: { ...defaultDateField } }),
-            ...(formData.dashboardName
-                ? {}
-                : { dashboardName: defaultDashboardName }),
-            ...(dashboardItem ? { dashboardItemId: dashboardItem._id } : {}),
-            query: queryNoDateColumn || query,
-            queryString: queryNoDateColumn || query,
-            pivot: formData.pivot,
-        };
-        if (cloudBody['rows']) {
-            delete cloudBody['rows'];
-            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 || '*',
-            },
-        };
-        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,
-                    fields,
-                    filtersApplied: dashboardFilters,
-                },
-            });
-        }
-        setIsOpen(false);
-        setIsSubmitting(false);
-        if (onAddToDashboardComplete) {
-            onAddToDashboardComplete();
-        }
-    };
-    if (!schema) {
-        return;
-    }
-    return (_jsxs("div", { id: "quill-chart-modal", style: { padding: modalPadding }, children: [isEditMode && (_jsxs(_Fragment, { children: [_jsx(Banner, { dashboardItemName: dashboardItem.name, dashboardName: dashboardItem.dashboardName, style: {
-                            position: 'fixed',
-                            top: 0,
-                            left: 0,
-                            right: 0,
-                            margin: 0,
-                        }, onExit: () => {
-                            const msg = 'Are you sure you want to exit edit mode? Your changes will not be saved.';
-                            if (!confirm(msg))
-                                return;
-                            dispatch({ type: 'SET_ACTIVE_QUERY', payload: '' });
-                            dispatch({ type: 'SET_ACTIVE_EDIT_ITEM', payload: null });
-                        } }), _jsxs("style", { children: [" ", `#quill-modal-header { padding-top: 41px; }`, " "] })] })), _jsx("div", { children: _jsx(Chart, { config: { ...formData, rows }, colors: theme.chartColors, containerStyle: {
-                        width: formData.chartType === 'table' ? 640 : 'calc(100% - 24px)',
-                        height: 300,
-                    } }) }), _jsx("div", { style: { height: 20 } }), _jsxs("form", { ref: parentRef, id: "quill-chart-form", onSubmit: handleSubmit, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { children: "Name" }), _jsx(TextInput, { value: formData.name, onChange: (e) => handleChange(e, 'name'), placeholder: "Name" })] }), showDashboardDropdown && !destinationDashboard && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { children: "Dashboard" }), _jsx(Select, { label: 'Dashboard', value: formData.dashboardName, onChange: (e) => handleChange(e, 'dashboardName'), options: dashboardOptions.map((elem) => ({
-                                            label: elem.label,
-                                            value: elem.label,
-                                        })) })] })), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { children: "Chart type" }), _jsx(Select, { label: 'Chart Type', value: formData.chartType, onChange: (e) => handleChange(e, 'chartType'), 
-                                        // filter out metric for all pivots
-                                        // filter out bar and pie for row and column pivot
-                                        options: CHART_TYPES.filter((elem) => !((formData.pivot && elem === 'metric') ||
-                                            (formData.pivot &&
-                                                formData.pivot.columnField &&
-                                                (elem === 'bar' || elem === 'pie')))).map((elem) => ({ label: elem, value: elem })) })] })] }), _jsx("br", {}), _jsxs("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            gap: 12,
-                            marginTop: 6,
-                        }, children: [_jsx(Header, { children: "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: Select, ButtonComponent: Button, PopoverComponent: Popover, LabelComponent: Label, TextComponent: Text, HeaderComponent: Header, theme: theme, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: columns, triggerButtonText: 'Add pivot +', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: handleDeletePivot, selectPivot: handleAddPivot, dateRange: dateRange, selectPivotOnEdit: true, showTrigger: !formData.pivot }) }), formData.pivot && (_jsx("div", { style: {
-                                            // width: 592,
-                                            paddingRight: deleteRef?.current ? 42 : 0,
-                                            maxWidth: 750,
-                                        }, children: _jsx("div", { style: { width: divWidth }, 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: () => { }, ButtonComponent: Button, HeaderComponent: Header, showEdit: false, onClose: handleDeletePivot, minHeight: 180, LabelComponent: Label, TextComponent: Text }) }) }))] })] }), _jsx("br", {}), (formData.pivot || formData.chartType !== 'table') && (_jsxs("div", { children: [_jsxs("div", { style: {
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    gap: 6,
-                                    marginTop: 6,
-                                }, children: [_jsx(Header, { children: "Chart" }), _jsx(Label, { children: "X-axis" })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, children: [_jsx(Select, { label: 'X-axis Field', value: formData.xAxisField, onChange: (e) => handleChange(e, 'xAxisField'), disabled: formData.pivot !== null, options: fieldOptions.map((elem) => ({
-                                            label: formData.pivot
-                                                ? `pivot row (${elem.field})`
-                                                : elem.field,
-                                            value: elem.field,
-                                        })) }), _jsx(TextInput, { value: formData.xAxisLabel, placeholder: "Column Label", onChange: (e) => handleChange(e, 'xAxisLabel') }), _jsx(Select, { label: 'X-axis Format', value: formData.xAxisFormat, onChange: (e) => handleChange(e, 'xAxisFormat'), options: formatOptions })] }, 'xAxisField0'), _jsx("br", {}), _jsx(Label, { children: "Y-axis" }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: formData.yAxisFields.map((yAxisField, index) => (_jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, children: [_jsx(Select, { label: 'Y-axis Field', value: yAxisField.field, onChange: (e) => handleChange(e, 'yAxisFields.field', index), disabled: formData.pivot !== null, options: [
-                                                { label: 'Select', value: '' },
-                                                ...fieldOptions
-                                                    .filter((elem) => {
-                                                    return (formData.chartType === 'table' ||
-                                                        formData.pivot ||
-                                                        numberFormatOptions.includes(columns.find((col) => col.field === elem.field)
-                                                            ?.format));
-                                                })
-                                                    .map((elem) => ({
-                                                    label: formData.pivot
-                                                        ? `pivot columns (${formData.pivot.valueField})`
-                                                        : elem.field,
-                                                    value: elem.field,
-                                                })),
-                                            ] }), _jsx(TextInput, { value: yAxisField.label, placeholder: "Column Label", onChange: (e) => handleChange(e, 'yAxisFields.label', index) }), _jsx(Select, { label: 'Y-axis Format', value: yAxisField.format, onChange: (e) => handleChange(e, 'yAxisFields.format', index), options: [{ label: 'Select', value: '' }, ...formatOptions] }), formData.pivot === null && (_jsx("div", { ref: deleteRef, children: _jsx(DeleteButton, { style: { marginLeft: deleteButtonMargin }, onClick: () => handleRemoveField('yAxisFields', index) }) }))] }, 'yAxisField' + index))) }), formData.pivot === null && (_jsxs(_Fragment, { children: [_jsx("br", {}), _jsx(SecondaryButton, { onClick: () => handleAddField('yAxisFields'), label: "Add field +" })] })), _jsx("br", {}), _jsx("br", {})] })), (showTableFormatOptions || formData.chartType === 'table') && (_jsxs("div", { children: [_jsxs("div", { style: {
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    gap: 6,
-                                    marginTop: 6,
-                                }, children: [_jsx(Header, { children: "Table" }), _jsx(Label, { children: "Columns" })] }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: formData.columns.map((column, index) => (_jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, children: [_jsx(Select, { label: 'Column Field', value: column.field, onChange: (e) => handleChange(e, 'columns.field', index), options: [
-                                                { label: 'Select', value: '' },
-                                                ...fields.map((elem) => ({
-                                                    label: elem.field,
-                                                    value: elem.field,
-                                                })),
-                                            ] }), _jsx(TextInput, { name: "label", value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e, 'columns.label', index) }), _jsx(Select, { label: 'Column Format', value: column.format, onChange: (e) => handleChange(e, 'columns.format', index), options: [{ label: 'Select', value: '' }, ...formatOptions] }), _jsx("div", { ref: deleteRef, children: _jsx(DeleteButton, { style: { marginLeft: deleteButtonMargin }, onClick: () => handleRemoveField('columns', index) }) })] }, 'column' + index))) }), _jsx("br", {}), _jsx(SecondaryButton, { onClick: () => handleAddField('columns'), label: "Add column +" }), _jsx("br", {}), _jsx("br", {})] })), showDateFieldOptions && (_jsxs("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            gap: 6,
-                            marginTop: 6,
-                        }, children: [_jsx(Header, { children: "Date field" }), _jsxs("div", { style: {
-                                    display: 'flex',
-                                    flexDirection: 'row',
-                                    gap: 12,
-                                    // lmao part 2
-                                }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { children: "Table" }), _jsx(Select, { label: 'Date Table', value: formData.dateField.table, onChange: (e) => handleChange(e, 'dateField.table'), options: [
-                                                    {
-                                                        label: 'Select',
-                                                        value: '',
-                                                    },
-                                                    ...dateFieldOptions.map((elem) => ({
-                                                        label: elem.name,
-                                                        value: elem.name,
-                                                    })),
-                                                ] })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { children: "Field" }), _jsx(Select, { label: 'Date Field', value: formData.dateField.field, onChange: (e) => handleChange(e, 'dateField.field'), options: dateFieldOptions
-                                                    ?.find((elem) => elem.name === formData.dateField.table)
-                                                    ?.columns?.map((elem) => ({
-                                                    label: elem.name,
-                                                    value: elem.name,
-                                                })) || [] })] })] }), _jsx("br", {})] })), showAccessControlOptions && (_jsxs("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            gap: 12,
-                            marginTop: 6,
-                        }, children: [_jsx(Header, { children: "Organization access" }), _jsx(SegmentedControl, { onChange: (e) => handleChange(e, 'template'), value: formData.template, theme: theme, organizationName: organizationName }), _jsx("br", {}), _jsx("br", {})] })), _jsxs("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'row',
-                            justifyContent: 'flex-end',
-                            gap: 10,
-                        }, children: [dashboardItem && (_jsx(SecondaryButton, { onClick: deleteChart, label: 'Delete' })), _jsx(Button, { onClick: editChart, label: buttonLabel
-                                    ? buttonLabel
-                                    : dashboardItem
-                                        ? 'Save changes'
-                                        : 'Add to dashboard' })] })] })] }));
-}
-function SegmentedControl({ onChange, value, theme, organizationName = 'This Organization', }) {
-    return (_jsxs("div", { style: {
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            background: '#F5F5F6',
-            maxWidth: 418,
-            padding: 4,
-            borderRadius: 6,
-        }, children: [_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'] }), _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] })] }));
-}