@quillsql/react 2.10.31 → 2.10.32

package/dist/esm/ChartBuilder.js

@@ -0,0 +1,700 @@
+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] })] }));
+}