@quillsql/react 2.11.8 → 2.11.12

package/dist/esm/ChartBuilder.js

@@ -26,7 +26,39 @@ const CHART_TO_LABELS = {
     bar: { xAxisLabel: 'X-Axis', yAxisLabel: 'Y-Axis' },
     pie: { xAxisLabel: 'Category', yAxisLabel: 'Count' },
 };
-function getTablesHelper(ast, allTables) {
+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,
+            },
+        ];
+    }
+}
+function getChartTypeOptions(formData) {
+    if (formData.pivot && !formData.pivot.rowField) {
+        return CHART_TYPES.filter((elem) => elem === 'metric' || elem === 'table').map((elem) => ({
+            label: elem,
+            value: elem,
+        }));
+    }
+    else {
+        return CHART_TYPES.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, filterForDate = true) {
     const tables = [];
     const withAliases = [];
     if (ast.with && ast.with.length) {
@@ -59,14 +91,16 @@ function getTablesHelper(ast, allTables) {
         .map((table) => {
         return {
             name: table.displayName,
-            columns: table.columns.filter((column) => POSTGRES_DATE_TYPES.includes(column.fieldType)),
+            columns: table.columns.filter((column) => filterForDate
+                ? POSTGRES_DATE_TYPES.includes(column.fieldType)
+                : column.fieldType),
         };
     })
         .filter((table) => table.columns.length > 0);
 }
-async function getReferencedTables(client, sqlQuery, dbTables) {
+async function getReferencedTables(client, sqlQuery, dbTables, filterForDate = true) {
     const resp = await getDataFromCloud(client, `astify`, { query: sqlQuery });
-    return getTablesHelper(resp.ast.length ? resp.ast[0] : resp.ast, dbTables);
+    return getTablesHelper(resp.ast.length ? resp.ast[0] : resp.ast, dbTables, filterForDate);
 }
 export const numberFormatOptions = [
     'whole_number',
@@ -113,12 +147,13 @@ export function ChartBuilderWithModal(props) {
             }
             : {}, theme: theme, children: _jsx(ChartBuilder, { ...props }) }));
 }
-export default function ChartBuilder({ TextInput = QuillTextInput, Select = QuillSelectComponent, Button = MemoizedButton, SecondaryButton = MemoizedSecondaryButton, Header = MemoizedHeader, Label = MemoizedLabel, DeleteButton = MemoizedDeleteButton, Text = MemoizedText, Popover = MemoizedPopover, isOpen, isEditMode = false, horizontalView = false, 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, }) {
+export default function ChartBuilder({ TextInput = QuillTextInput, Select = QuillSelectComponent, Button = MemoizedButton, SecondaryButton = MemoizedSecondaryButton, Header = MemoizedHeader, Label = MemoizedLabel, DeleteButton = MemoizedDeleteButton, Text = MemoizedText, Popover = MemoizedPopover, isOpen, isEditMode = false, horizontalView = false, 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, pivotData, }) {
     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,
@@ -130,6 +165,31 @@ export default function ChartBuilder({ TextInput = QuillTextInput, Select = Quil
     const deleteRef = useRef(null);
     const modalPadding = 20;
     const deleteButtonMargin = -13;
+    useEffect(() => {
+        const calculateWidth = () => {
+            return (
+            // @ts-ignore
+            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;
@@ -170,30 +230,16 @@ export default function ChartBuilder({ TextInput = QuillTextInput, Select = Quil
     }, [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);
-            setFormData({ ...formData, dashboardName: 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 [defaultDashboardName, setDefaultDashboardName] = useState(destinationDashboard || dashboardItem?.dashboardName || '');
     const { dashboardFilters } = useContext(DashboardFiltersContext);
+    const [dashboardFilters2, setDashboardFilters] = useState([]);
+    const [dashboardHasDateFilter, setDashboardHasDateFilter] = useState(false);
+    const [dashboardHasDateComparison, setDashboardHasDateComparison] = useState(false);
+    const [showFilterModal, setShowFilterModal] = useState(false);
+    const [filterIssues, setFilterIssues] = useState([]);
     const [showPivotPopover, setShowPivotPopover] = useState(false);
     const [isEdittingPivot, setIsEdittingPivot] = useState(false);
+    const [intialLoad, setInitialLoad] = useState(true);
     const [selectedPivotIndex, setSelectedPivotIndex] = useState(-1);
     const [tableName, setTableName] = useState(undefined);
     const selectedTable = schema?.find((t) => t.displayName === tableName);
@@ -207,37 +253,15 @@ export default function ChartBuilder({ TextInput = QuillTextInput, Select = Quil
     // 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]);
-    const defaultDateField = {
-        table: dateFieldOptions[0]?.name,
-        field: dateFieldOptions[0]?.columns[0]?.name,
-    };
+    const [allTables, setAllTables] = 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,
+        dashboardName: dashboardOptions[0]?.label || '',
         columns: columns.map((col) => {
             return { ...col, label: snakeCaseToTitleCase(col.label) };
         }),
@@ -256,6 +280,32 @@ export default function ChartBuilder({ TextInput = QuillTextInput, Select = Quil
         dateField: defaultDateField,
         template: false,
     };
+    const updateDashboardFilters = async (dashboardName) => {
+        const { queryEndpoint, queryHeaders, publicKey } = client;
+        if (queryEndpoint) {
+            const response = await fetch(queryEndpoint, {
+                method: 'POST',
+                headers: {
+                    ...queryHeaders,
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    metadata: {
+                        orgId: '*',
+                        task: 'config',
+                        name: dashboardName,
+                        clientId: publicKey,
+                        databaseType: client.databaseType,
+                    },
+                }),
+                credentials: 'omit', // If withCredentials is true, set to 'include'. Otherwise, set to 'omit'.
+            });
+            const responseData = (await response.json()).data;
+            setDashboardFilters(responseData.filters);
+            setDashboardHasDateFilter(!!responseData.dateFilter);
+            setDashboardHasDateComparison(responseData.dateFilter?.comparison || false);
+        }
+    };
     const pivotFormData = (pivot) => {
         const yAxisField = pivot.columnField || pivot.valueField;
         // date labels for pivots should be treated like strings since they are
@@ -263,10 +313,11 @@ export default function ChartBuilder({ TextInput = QuillTextInput, Select = Quil
         const yAxisIsDate = pivot.columnField
             ? isDateField(pivot.columnFieldType)
             : false;
+        const chartType = dashboardItem?.chartType ?? (pivot.rowField ? 'column' : 'metric');
         return {
             pivot,
-            chartType: dashboardItem?.chartType || 'column',
-            xAxisField: pivot.rowField,
+            chartType: chartType,
+            xAxisField: pivot.rowField ? pivot.rowField : pivot.valueField,
             xAxisFormat: isDateField(pivot.rowFieldType)
                 ? 'string'
                 : columns.find((col) => col.field === pivot.rowField)?.format ||
@@ -287,14 +338,66 @@ export default function ChartBuilder({ TextInput = QuillTextInput, Select = Quil
     const [formData, setFormData] = useState(pivot
         ? { ...formEmptyState, ...dashboardItem, ...pivotFormData(pivot) }
         : dashboardItem || formEmptyState);
+    useEffect(() => {
+        async function getFormData() {
+            const curFormData = formData;
+            const resp = await getDataFromCloud(client, `dashnames/${client.publicKey}/`, null, 'GET');
+            const dashboardOptions = resp.dashboardNames
+                .filter((elem) => elem !== null)
+                .map((key) => ({ label: key, value: key }));
+            await updateDashboardFilters(dashboardItem
+                ? dashboardItem.dashboardName
+                : dashboardOptions[0]?.label);
+            setDashboardOptions(dashboardOptions);
+            const dashboardName = dashboardItem
+                ? dashboardItem?.dashboardName
+                : dashboardOptions[0]?.label;
+            curFormData.dashboardName = dashboardName;
+            setDefaultDashboardName(dashboardItem
+                ? dashboardItem?.dashboardName
+                : dashboardOptions[0]?.label);
+            // setFormData({
+            //   ...formData,
+            //   dashboardName: dashboardItem
+            //     ? dashboardItem?.dashboardName
+            //     : dashboardOptions[0]?.label,
+            // });
+            if (!query) {
+                return;
+            }
+            const result = await getReferencedTables(client, query, schema, true);
+            setDateFieldOptions(result);
+            const allReferencedFields = await getReferencedTables(client, query, schema, false);
+            setAllTables(allReferencedFields.map((table) => table.name));
+            setTableName(result[0]?.name);
+            const dateField = {
+                table: result[0]?.name || '',
+                field: result[0]?.columns?.find((elem) => elem.name === dateColumn)?.name ||
+                    result[0]?.columns[0]?.name ||
+                    '',
+            };
+            curFormData.dateField = dateField;
+            setFormData({
+                ...curFormData,
+            });
+        }
+        getFormData();
+    }, []);
     const selectedPivotTable = useMemo(() => {
         if (formData.pivot && rows) {
-            return generatePivotTable(formData.pivot, rows, dateRange, false);
+            if (intialLoad && pivotData) {
+                setInitialLoad(false);
+                return pivotData;
+            }
+            else {
+                setInitialLoad(false);
+                return generatePivotTable(formData.pivot, rows, dateRange, false);
+            }
         }
         else {
             return undefined;
         }
-    }, [formData.pivot, rows, formData]);
+    }, [formData.pivot, rows]);
     const handleChange = (value, fieldName, index) => {
         try {
             // WE NEED TO REPROCESS THE PIVOT TABLE IF THE PIVOT COLUMN CHANGES
@@ -374,7 +477,6 @@ export default function ChartBuilder({ TextInput = QuillTextInput, Select = Quil
             }
         }
         catch (e) {
-            console.log('No field or subfield found');
             setFormData({ ...formData, [fieldName]: value });
         }
     };
@@ -461,7 +563,29 @@ export default function ChartBuilder({ TextInput = QuillTextInput, Select = Quil
         setIsOpen(false);
         setIsSubmitting(false);
     };
-    const editChart = async () => {
+    const editChart = async (override = false) => {
+        if (!override) {
+            let dashboardDiscrepancyIssues = [];
+            if (dashboardHasDateComparison && formData.chartType === 'pie') {
+                dashboardDiscrepancyIssues.push(`The ${formData.dashboardName} dashboard is used for comparing date fields. This feature is not applicable to pie charts. We recommend switching to a column or bar chart instead.`);
+            }
+            if (dashboardHasDateFilter &&
+                (!defaultDateField ||
+                    (!formData.dateField.field && !formData.dateField.table))) {
+                dashboardDiscrepancyIssues.push(`The dashboard "${formData.dashboardName}" has a global date filter but this chart doesn't reference any tables with a date field. It is not recommended to add this chart because the global filter cannot be applied.`);
+            }
+            dashboardFilters2.forEach((filter) => {
+                const table = allTables.find((elem) => elem === filter.table);
+                if (!table) {
+                    dashboardDiscrepancyIssues.push(`The dashboard "${formData.dashboardName}" a global filter on "${filter.table}" "${filter.field}" but this chart doesn't reference "${filter.table}". It is not recommended to add this chart because the global filter on "${filter.table}" "${filter.field}" cannot be applied.`);
+                }
+            });
+            if (dashboardDiscrepancyIssues.length) {
+                setFilterIssues(dashboardDiscrepancyIssues);
+                setShowFilterModal(true);
+                return;
+            }
+        }
         if (isSubmitting) {
             return;
         }
@@ -532,231 +656,227 @@ export default function ChartBuilder({ TextInput = QuillTextInput, Select = Quil
     if (!schema) {
         return;
     }
-    // if (horizontalView && !isEditMode) {
-    //   console.log(horizontalView, isEditMode);
-    //   return;
-    // }
-    return (_jsx("div", { style: { width: '100%', height: '100%', flexGrow: 1 }, children: _jsxs("div", { id: "quill-chart-modal", style: {
-                width: '100%',
-                height: '100%',
-                maxWidth: '100%',
-                display: 'flex',
-                padding: modalPadding,
-                gap: '20px',
-                flexDirection: horizontalView ? 'row' : 'column',
-            }, children: [_jsxs("div", { style: {
-                        display: 'flex',
-                        flexDirection: 'column',
-                        gap: '20px',
-                        ...(horizontalView && {
-                            flexGrow: 1,
-                            maxWidth: !isOpen ? '100%' : 'calc(100% - 665px - 20px)', // width of left sidebar plus gap
-                        }),
-                    }, children: [(!horizontalView || formData.chartType !== 'table') && (_jsx(Chart, { colors: theme.chartColors, config: { ...formData, rows }, containerStyle: {
-                                width: '100%',
-                                height: 400,
-                                ...(horizontalView && { flexGrow: 1 }),
-                            } })), 
-                        // Make sure to display non-pivoted table when using pivot chart
-                        horizontalView && formData.chartType !== 'table' ? (_jsx(Chart, { config: {
-                                ...formData,
-                                pivot: undefined,
-                                chartType: 'table',
-                                rows,
-                                rowsPerPage: 20,
-                            }, containerStyle: {
-                                height: '100%',
-                                width: '100%',
-                                flexGrow: 1,
-                            } })) : (horizontalView && (_jsx(Chart, { config: {
-                                ...formData,
-                                chartType: 'table',
-                                rows,
-                                rowsPerPage: 20,
-                            }, containerStyle: {
-                                height: '100%',
-                                width: '100%',
+    return (_jsxs("div", { style: { width: '100%', height: '100%', flexGrow: 1 }, children: [_jsxs("div", { id: "quill-chart-modal", style: {
+                    width: '100%',
+                    height: '100%',
+                    maxWidth: '100%',
+                    display: 'flex',
+                    padding: modalPadding,
+                    gap: '20px',
+                    flexDirection: horizontalView ? 'row' : 'column',
+                    boxSizing: 'border-box',
+                }, children: [_jsxs("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: '20px',
+                            ...(horizontalView && {
                                 flexGrow: 1,
-                            } })))] }), (isOpen || !horizontalView) && (_jsxs("form", { ref: parentRef, id: "quill-chart-form", onSubmit: handleSubmit, style: {
-                        display: 'flex',
-                        flexDirection: 'column',
-                        height: '100%',
-                        ...(horizontalView && {
-                            minWidth: 665,
-                            maxWidth: 665,
-                            width: 665,
-                            gap: 20,
-                        }),
-                    }, children: [_jsxs("div", { style: { overflow: 'auto' }, 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, { id: "chart-builder-name", value: formData.name, onChange: (e) => handleChange(e, 'name'), placeholder: "Name", theme: theme })] }), showDashboardDropdown && !destinationDashboard && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { children: "Dashboard" }), _jsx(Select, { value: formData.dashboardName || '', onChange: (e) => handleChange(e, 'dashboardName'), options: dashboardOptions.map((elem) => ({
-                                                        label: elem.label,
-                                                        value: elem.label,
-                                                    })), theme: theme })] })), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { children: "Chart type" }), _jsx(Select, { 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 })), theme: theme })] })] }), _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: 42,
-                                                        maxWidth: 750,
-                                                    }, 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: [CHART_TO_LABELS[formData.chartType]?.xAxisLabel && (_jsx("div", { style: {
-                                                display: 'flex',
-                                                flexDirection: 'column',
-                                                gap: 6,
-                                                marginTop: 6,
-                                            }, children: _jsx(Header, { children: "Chart" }) })), CHART_TO_LABELS[formData.chartType]?.xAxisLabel && (_jsxs("div", { children: [_jsx(Label, { children: CHART_TO_LABELS[formData.chartType]?.xAxisLabel }), _jsxs("div", { style: {
-                                                        display: 'flex',
-                                                        flexDirection: 'row',
-                                                        gap: 12,
-                                                    }, children: [_jsx(Select, { value: formData.xAxisField, onChange: (e) => handleChange(e, 'xAxisField'), options: formData.pivot
-                                                                ? [
-                                                                    {
-                                                                        label: `Pivot Row (${formData.pivot.rowField})`,
-                                                                        value: formData.pivot.rowField,
-                                                                    },
-                                                                ]
-                                                                : fieldOptions.map((elem) => ({
-                                                                    label: elem.field,
-                                                                    value: elem.field,
-                                                                })), theme: theme }), _jsx(TextInput, { id: "chart-builder-x-axis-label", value: formData.pivot
-                                                                ? formData.pivot.rowField
-                                                                : formData.xAxisLabel, placeholder: "Column Label", onChange: (e) => handleChange(e, 'xAxisLabel'), theme: theme }), _jsx(Select, { value: formData.pivot &&
-                                                                isDateField(formData.pivot.rowFieldType)
-                                                                ? 'pivot_date'
-                                                                : formData.xAxisFormat, onChange: (e) => handleChange(e, 'xAxisFormat'), options: formData.pivot &&
-                                                                isDateField(formData.pivot.rowFieldType)
-                                                                ? [{ value: 'pivot_date', label: 'date' }]
-                                                                : formatOptions, theme: theme })] }, 'xAxisField'), _jsx("br", {})] })), CHART_TO_LABELS[formData.chartType]?.yAxisLabel && (_jsxs("div", { children: [_jsx(Label, { children: CHART_TO_LABELS[formData.chartType]?.yAxisLabel }), _jsx("div", { style: {
-                                                        display: 'flex',
-                                                        flexDirection: 'column',
-                                                        gap: 10,
-                                                    }, children: formData.yAxisFields.map((yAxisField, index) => (_jsxs("div", { style: {
+                                maxWidth: !isOpen ? '100%' : 'calc(100% - 665px - 20px)', // width of left sidebar plus gap
+                            }),
+                        }, children: [(!horizontalView || formData.chartType !== 'table') && (_jsx(Chart, { colors: theme.chartColors, config: { ...formData, rows }, containerStyle: {
+                                    width: '100%',
+                                    height: formData.chartType === 'metric'
+                                        ? 100
+                                        : horizontalView
+                                            ? '100%'
+                                            : 400,
+                                    ...(horizontalView && { flexGrow: 1 }),
+                                } })), 
+                            // Make sure to display non-pivoted table when using pivot chart
+                            horizontalView && formData.chartType !== 'table' ? (_jsx(Chart, { config: {
+                                    ...formData,
+                                    pivot: undefined,
+                                    chartType: 'table',
+                                    rows,
+                                    rowsPerPage: 20,
+                                }, containerStyle: {
+                                    height: '100%',
+                                    width: '100%',
+                                    flexGrow: 1,
+                                } })) : (horizontalView && (_jsx(Chart, { config: {
+                                    ...formData,
+                                    chartType: 'table',
+                                    rows,
+                                    rowsPerPage: 20,
+                                }, containerStyle: {
+                                    height: '100%',
+                                    width: '100%',
+                                    flexGrow: 1,
+                                } })))] }), (isOpen || !horizontalView) && (_jsxs("form", { ref: parentRef, id: "quill-chart-form", onSubmit: handleSubmit, style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            ...(horizontalView && {
+                                minWidth: 665,
+                                maxWidth: 665,
+                                width: 665,
+                                gap: 20,
+                            }),
+                        }, children: [_jsxs("div", { style: { overflow: 'auto' }, 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, { id: "chart-builder-name", value: formData.name, onChange: (e) => handleChange(e, 'name'), placeholder: "Name", theme: theme })] }), showDashboardDropdown && !destinationDashboard && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { children: "Dashboard" }), _jsx(Select, { value: formData.dashboardName || '', onChange: async (e) => {
+                                                            await updateDashboardFilters(e);
+                                                            handleChange(e, 'dashboardName');
+                                                        }, options: dashboardOptions.map((elem) => ({
+                                                            label: elem.label,
+                                                            value: elem.label,
+                                                        })), theme: theme })] })), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { children: "Chart type" }), _jsx(Select, { 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: getChartTypeOptions(formData), theme: theme })] })] }), _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: 42,
+                                                            maxWidth: 750,
+                                                        }, children: _jsx("div", { style: { width: !horizontalView ? divWidth : 'auto' }, 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: [CHART_TO_LABELS[formData.chartType]?.xAxisLabel && (_jsx("div", { style: {
+                                                    display: 'flex',
+                                                    flexDirection: 'column',
+                                                    gap: 6,
+                                                    marginTop: 6,
+                                                }, children: _jsx(Header, { children: "Chart" }) })), CHART_TO_LABELS[formData.chartType]?.xAxisLabel && (_jsxs("div", { children: [_jsx(Label, { children: CHART_TO_LABELS[formData.chartType]?.xAxisLabel }), _jsxs("div", { style: {
                                                             display: 'flex',
                                                             flexDirection: 'row',
                                                             gap: 12,
-                                                        }, children: [_jsx(Select, { value: formData.pivot
-                                                                    ? formData.pivot.valueField
-                                                                    : yAxisField.field, onChange: (e) => handleChange(e, 'yAxisFields.field', index), theme: theme, options: formData.pivot
-                                                                    ? [
-                                                                        {
-                                                                            label: `Pivot Column (${formData.pivot.valueField})`,
-                                                                            value: formData.pivot.valueField,
-                                                                        },
-                                                                    ]
-                                                                    : fieldOptions
-                                                                        .filter((elem) => {
-                                                                        return numberFormatOptions.includes(columns.find((col) => col.field === elem.field)?.format || '');
-                                                                    })
-                                                                        .map((elem) => ({
+                                                        }, children: [_jsx(Select, { value: formData.xAxisField, onChange: (e) => handleChange(e, 'xAxisField'), options: formData.pivot
+                                                                    ? getPivotMetricOptions(formData.pivot)
+                                                                    : fieldOptions.map((elem) => ({
                                                                         label: elem.field,
                                                                         value: elem.field,
-                                                                    })) }), _jsx(TextInput, { id: "chart-builder-y-axis-label", value: formData.pivot?.valueField || yAxisField.label, placeholder: "Column Label", onChange: (e) => handleChange(e, 'yAxisFields.label', index), theme: theme }), _jsx(Select, { theme: theme, value: formData.pivot
-                                                                    ? !!NUMBER_OPTIONS.find((option) => {
-                                                                        return (option.value === yAxisField.format);
-                                                                    })
-                                                                        ? // @ts-ignore
-                                                                            NUMBER_OPTIONS.find((option) => option.value === yAxisField.format).value
-                                                                        : 'whole_number'
-                                                                    : yAxisField.format, onChange: (e) => handleChange(e, 'yAxisFields.format', index), options: formData.pivot
-                                                                    ? NUMBER_OPTIONS
-                                                                    : 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", {})] })), (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.pivot &&
-                                                selectedPivotTable &&
-                                                selectedPivotTable.columns &&
-                                                formData.chartType === 'table'
-                                                ? // THIS CASE IF FOR PIVOT TABLES ONLY
-                                                    selectedPivotTable.columns.map((column, index) => (_jsxs("div", { style: {
+                                                                    })), theme: theme }), _jsx(TextInput, { id: "chart-builder-x-axis-label", value: formData.pivot
+                                                                    ? formData.pivot.rowField
+                                                                    : formData.xAxisLabel, placeholder: "Column Label", onChange: (e) => handleChange(e, 'xAxisLabel'), theme: theme }), _jsx(Select, { value: formData.pivot &&
+                                                                    isDateField(formData.pivot.rowFieldType)
+                                                                    ? 'pivot_date'
+                                                                    : formData.xAxisFormat, onChange: (e) => handleChange(e, 'xAxisFormat'), options: formData.pivot &&
+                                                                    isDateField(formData.pivot.rowFieldType)
+                                                                    ? [{ value: 'pivot_date', label: 'date' }]
+                                                                    : formatOptions, theme: theme })] }, 'xAxisField'), _jsx("br", {})] })), CHART_TO_LABELS[formData.chartType]?.yAxisLabel && (_jsxs("div", { children: [_jsx(Label, { children: CHART_TO_LABELS[formData.chartType]?.yAxisLabel }), _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, { value: formData.pivot
+                                                                        ? formData.pivot.valueField
+                                                                        : yAxisField.field, onChange: (e) => handleChange(e, 'yAxisFields.field', index), theme: theme, options: formData.pivot
+                                                                        ? [
+                                                                            {
+                                                                                label: `Pivot Column (${formData.pivot.valueField})`,
+                                                                                value: formData.pivot.valueField,
+                                                                            },
+                                                                        ]
+                                                                        : fieldOptions
+                                                                            .filter((elem) => {
+                                                                            return numberFormatOptions.includes(columns.find((col) => col.field === elem.field)?.format || '');
+                                                                        })
+                                                                            .map((elem) => ({
+                                                                            label: elem.field,
+                                                                            value: elem.field,
+                                                                        })) }), _jsx(TextInput, { id: "chart-builder-y-axis-label", value: formData.pivot?.valueField || yAxisField.label, placeholder: "Column Label", onChange: (e) => handleChange(e, 'yAxisFields.label', index), theme: theme }), _jsx(Select, { theme: theme, value: formData.pivot
+                                                                        ? !!NUMBER_OPTIONS.find((option) => {
+                                                                            return (option.value === yAxisField.format);
+                                                                        })
+                                                                            ? // @ts-ignore
+                                                                                NUMBER_OPTIONS.find((option) => option.value === yAxisField.format).value
+                                                                            : 'whole_number'
+                                                                        : yAxisField.format, onChange: (e) => handleChange(e, 'yAxisFields.format', index), options: formData.pivot
+                                                                        ? NUMBER_OPTIONS
+                                                                        : 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", {})] })), (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.pivot &&
+                                                    selectedPivotTable &&
+                                                    selectedPivotTable.columns &&
+                                                    formData.chartType === 'table'
+                                                    ? // THIS CASE IF FOR PIVOT TABLES ONLY
+                                                        selectedPivotTable.columns.map((column, index) => (_jsxs("div", { style: {
+                                                                display: 'flex',
+                                                                flexDirection: 'row',
+                                                                gap: 12,
+                                                            }, children: [_jsx(Select, { theme: theme, value: column.label, onChange: (e) => handleChange(e, 'columns.field', index), options: selectedPivotTable.columns.map((elem) => ({
+                                                                        label: elem.label,
+                                                                        value: elem.label,
+                                                                    })) }), _jsx(TextInput, { id: `chart-builder-column-label-${index}`, value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e, 'columns.label', index), theme: theme }), _jsx(Select, { theme: theme, 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 ||
+                                                                            'whole_number', onChange: (e) => handleChange(e, 'pivotColumn', index), options: formData.pivot && index === 0
+                                                                        ? isDateField(formData.pivot.rowFieldType)
+                                                                            ? [{ label: 'date', value: 'pivot_date' }]
+                                                                            : [{ label: 'string', value: 'string' }]
+                                                                        : [...NUMBER_OPTIONS] })] }, 'column' + index)))
+                                                    : formData.columns.map((column, index) => (_jsxs("div", { style: {
                                                             display: 'flex',
                                                             flexDirection: 'row',
                                                             gap: 12,
-                                                        }, children: [_jsx(Select, { theme: theme, value: column.label, onChange: (e) => handleChange(e, 'columns.field', index), options: selectedPivotTable.columns.map((elem) => ({
-                                                                    label: elem.label,
-                                                                    value: elem.label,
-                                                                })) }), _jsx(TextInput, { id: `chart-builder-column-label-${index}`, value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e, 'columns.label', index), theme: theme }), _jsx(Select, { theme: theme, 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 ||
-                                                                        'whole_number', onChange: (e) => handleChange(e, 'pivotColumn', index), options: formData.pivot && index === 0
-                                                                    ? isDateField(formData.pivot.rowFieldType)
-                                                                        ? [{ label: 'date', value: 'pivot_date' }]
-                                                                        : [{ label: 'string', value: 'string' }]
-                                                                    : [...NUMBER_OPTIONS] })] }, 'column' + index)))
-                                                : formData.columns.map((column, index) => (_jsxs("div", { style: {
-                                                        display: 'flex',
-                                                        flexDirection: 'row',
-                                                        gap: 12,
-                                                    }, children: [_jsx(Select, { theme: theme, value: column.field, onChange: (e) => handleChange(e, 'columns.field', index), options: fields.map((elem) => ({
-                                                                label: elem.field,
-                                                                value: elem.field,
-                                                            })) }), _jsx(TextInput, { id: `chart-builder-column-label-${index}`, value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e, 'columns.label', index), theme: theme }), _jsx(Select, { theme: theme, value: column.format, onChange: (e) => handleChange(e, 'columns.format', index), options: 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 && formData.dateField && (_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,
-                                            }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { children: "Table" }), _jsx(Select, { theme: theme, value: formData.dateField?.table, onChange: (e) => handleChange(e, 'dateField.table'), options: dateFieldOptions.map((elem) => ({
-                                                                label: elem.name,
-                                                                value: elem.name,
-                                                            })) })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { children: "Field" }), _jsx(Select, { theme: theme, value: removeDoubleQuotes(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 || 'This Organization' })] }))] }), _jsxs("div", { style: {
-                                display: 'flex',
-                                flexDirection: 'row',
-                                justifyContent: 'flex-end',
-                                marginTop: 'auto',
-                                gap: 10,
-                            }, children: [!horizontalView && dashboardItem && (_jsx(SecondaryButton, { onClick: deleteChart, label: 'Delete' })), _jsx(Button, { onClick: editChart, label: buttonLabel
-                                        ? buttonLabel
-                                        : dashboardItem
-                                            ? 'Save changes'
-                                            : 'Add to dashboard' })] })] }))] }) }));
+                                                        }, children: [_jsx(Select, { theme: theme, value: column.field, onChange: (e) => handleChange(e, 'columns.field', index), options: fields.map((elem) => ({
+                                                                    label: elem.field,
+                                                                    value: elem.field,
+                                                                })) }), _jsx(TextInput, { id: `chart-builder-column-label-${index}`, value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e, 'columns.label', index), theme: theme }), _jsx(Select, { theme: theme, value: column.format, onChange: (e) => handleChange(e, 'columns.format', index), options: 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 && formData.dateField && (_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,
+                                                }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { children: "Table" }), _jsx(Select, { theme: theme, value: formData.dateField?.table, onChange: (e) => handleChange(e, 'dateField.table'), options: dateFieldOptions.map((elem) => ({
+                                                                    label: elem.name,
+                                                                    value: elem.name,
+                                                                })) })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { children: "Field" }), _jsx(Select, { theme: theme, value: removeDoubleQuotes(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 })] }))] }), _jsxs("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    justifyContent: 'flex-end',
+                                    marginTop: 'auto',
+                                    gap: 10,
+                                }, children: [!horizontalView && dashboardItem && (_jsx(SecondaryButton, { onClick: deleteChart, label: 'Delete' })), _jsx(Button, { onClick: () => editChart(), label: buttonLabel
+                                            ? buttonLabel
+                                            : dashboardItem
+                                                ? 'Save changes'
+                                                : 'Add to dashboard' })] })] }))] }), _jsx(DashboardFilterModal, { isOpen: showFilterModal, setIsOpen: setShowFilterModal, override: () => editChart(true), theme: theme, issues: filterIssues })] }));
 }
 function SegmentedControl({ onChange, value, theme, organizationName, }) {
     return (_jsxs("div", { style: {
@@ -764,7 +884,7 @@ function SegmentedControl({ onChange, value, theme, organizationName, }) {
             flexDirection: 'row',
             alignItems: 'center',
             background: '#F5F5F6',
-            maxWidth: 418,
+            maxWidth: organizationName ? 418 : 209,
             padding: 4,
             borderRadius: 6,
         }, children: [_jsxs("button", { className: "quill-tab", onClick: () => onChange(true), style: {
@@ -790,7 +910,7 @@ function SegmentedControl({ onChange, value, theme, organizationName, }) {
     .quill-tab:active {
       background-color: "rgba(56, 65, 81, 0.15)";
     }
-` }), 'All Organizations'] }), _jsxs("button", { className: "quill-tab2", onClick: () => onChange(false), style: {
+` }), '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)'
@@ -798,7 +918,9 @@ function SegmentedControl({ onChange, value, theme, organizationName, }) {
                     outline: 'none',
                     width: '100%',
                     borderRadius: 4,
-                    color: value === false ? 'rgba(56, 65, 81, 1)' : 'rgba(56, 65, 81, 0.85)',
+                    color: value === false
+                        ? 'rgba(56, 65, 81, 1)'
+                        : 'rgba(56, 65, 81, 0.85)',
                     padding: 10,
                     fontWeight: value === false ? 600 : 500,
                     fontSize: 14,
@@ -816,5 +938,24 @@ function SegmentedControl({ onChange, value, theme, organizationName, }) {
     .quill-tab2:active {
       background-color: "rgba(56, 65, 81, 0.15)";
     }
-` }), organizationName] })] }));
+` }), organizationName] }))] }));
+}
+export function DashboardFilterModal({ isOpen, setIsOpen, override, theme, issues, }) {
+    return (_jsx(MemoizedModal, { isOpen: isOpen, onClose: () => {
+            setIsOpen(false);
+        }, setIsOpen: setIsOpen, theme: theme, title: 'Chart not compatible with selected dashboard', children: _jsxs("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                width: '600px',
+                padding: '20px',
+                boxSizing: 'border-box',
+            }, children: [issues.map((issue, index) => (_jsx("span", { style: { paddingTop: '10px' }, children: issue }, issue))), _jsx("br", {}), _jsxs("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        gap: '12px',
+                        justifyContent: 'flex-end',
+                    }, children: [_jsx(MemoizedButton, { label: "Got It", onClick: () => setIsOpen(false) }), _jsx(MemoizedSecondaryButton, { label: "Override", onClick: () => {
+                                override();
+                                setIsOpen(false);
+                            } })] })] }) }));
 }