@quillsql/react 2.11.7 → 2.11.9

package/dist/esm/ChartBuilder.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useState, useContext, useMemo, } from 'react';
 import { ClientContext, DashboardContext, DashboardFiltersContext, SchemaContext, ThemeContext, } from './Context';
 import { getData, getDataFromCloud } from './utils/dataFetcher';
@@ -7,7 +7,6 @@ import { PivotModal, generatePivotTable, isDateField, } from './internals/Report
 import { PivotCard } from './internals/ReportBuilder/PivotList';
 import Chart from './Chart';
 import { MemoizedModal, QuillTextInput, MemoizedButton, MemoizedSecondaryButton, MemoizedHeader, MemoizedLabel, MemoizedDeleteButton, MemoizedText, MemoizedPopover, } from './components/UiComponents';
-import Banner from './components/Banner';
 import { mergeComparisonRange } from './utils/merge';
 import { QuillSelectComponent } from './components/QuillSelect';
 import { removeDoubleQuotes, snakeCaseToTitleCase, } from './utils/textProcessing';
@@ -82,6 +81,7 @@ export const dateFormatOptions = [
     'MMM_dd_yyyy',
     'MMM_dd_hh:mm_ap_pm',
     'hh_ap_pm',
+    'date',
 ];
 const NUMBER_OPTIONS = [
     { value: 'whole_number', label: 'whole number' },
@@ -103,17 +103,22 @@ const formatOptions = [
     { value: 'percent', label: 'percent' },
     { value: 'string', label: 'string' },
 ];
-export default function ChartBuilder(props) {
+export function ChartBuilderWithModal(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 }) })) }));
+    const Modal = props.Modal ?? MemoizedModal;
+    return (_jsx(Modal, { isOpen: props.isOpen, setIsOpen: props.setIsOpen, onClose: () => props.setIsOpen(false), title: props.title || 'Add to dashboard', style: props.horizontalView
+            ? {
+                width: 'calc(100vw - 80px)',
+                height: 'calc(100vh - 80px)',
+            }
+            : {}, theme: theme, children: _jsx(ChartBuilder, { ...props }) }));
 }
-function ChartBuilderForm({ TextInput = QuillTextInput, Select = QuillSelectComponent, Button = MemoizedButton, SecondaryButton = MemoizedSecondaryButton, Header = MemoizedHeader, Label = MemoizedLabel, DeleteButton = MemoizedDeleteButton, Text = MemoizedText, 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, }) {
+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, }) {
     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,
@@ -125,29 +130,6 @@ function ChartBuilderForm({ TextInput = QuillTextInput, Select = QuillSelectComp
     const deleteRef = useRef(null);
     const modalPadding = 20;
     const deleteButtonMargin = -13;
-    useEffect(() => {
-        const calculateWidth = () => {
-            return ((parentRef.current?.offsetWidth || 0) -
-                (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;
@@ -233,7 +215,7 @@ function ChartBuilderForm({ TextInput = QuillTextInput, Select = QuillSelectComp
             const result = await getReferencedTables(client, query, schema);
             setDateFieldOptions(result);
             setTableName(result[0]?.name);
-            if (!formData.dateField.table) {
+            if (!formData.dateField?.table) {
                 setFormData({
                     ...formData,
                     dateField: {
@@ -247,7 +229,7 @@ function ChartBuilderForm({ TextInput = QuillTextInput, Select = QuillSelectComp
             }
         };
         fetchReferencedTables();
-    }, [query, schema]);
+    }, [query]);
     const defaultDateField = {
         table: dateFieldOptions[0]?.name,
         field: dateFieldOptions[0]?.columns[0]?.name,
@@ -550,174 +532,231 @@ function ChartBuilderForm({ TextInput = QuillTextInput, Select = QuillSelectComp
     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, { 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: 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: [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: {
+    // 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%',
+                                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: '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: {
+                                                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: {
+                                                            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.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: [_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 && (_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, { 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' }), _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' })] })] })] }));
+                                            }, 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' })] })] }))] }) }));
 }
 function SegmentedControl({ onChange, value, theme, organizationName, }) {
     return (_jsxs("div", { style: {

package/dist/esm/ChartEditor.d.ts

@@ -7,6 +7,7 @@ interface ChartEditorProps {
     isEditMode?: boolean;
     chartBuilderTitle?: string;
     chartBuilderButtonLabel?: string;
+    onAddToDashboardComplete?: () => void;
     onDelete?: () => void;
     setIsOpen: (isOpen: boolean) => void;
     Select?: (props: SelectComponentProps) => JSX.Element;
@@ -21,7 +22,8 @@ interface ChartEditorProps {
     Popover?: (props: PopoverComponentProps) => JSX.Element;
     destinationDashboard?: string;
     organizationName?: string;
+    horizontalView?: boolean;
 }
-export default function ChartEditor({ isOpen, chartId, isEditMode, admin, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, organizationName, onDelete, setIsOpen, Select, TextInput, Button, SecondaryButton, Header, Label, Text, DeleteButton, Modal, Popover, }: ChartEditorProps): import("react/jsx-runtime").JSX.Element;
+export default function ChartEditor({ isOpen, chartId, isEditMode, admin, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, organizationName, horizontalView, onDelete, setIsOpen, Select, TextInput, Button, SecondaryButton, Header, Label, Text, DeleteButton, Modal, Popover, }: ChartEditorProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ChartEditor.d.ts.map

package/dist/esm/ChartEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartEditor.d.ts","sourceRoot":"","sources":["../../src/ChartEditor.tsx"],"names":[],"mappings":";AAQA,OAAO,EACL,oBAAoB,EACpB,uBAAuB,EACvB,oBAAoB,EACpB,mBAAmB,EACnB,WAAW,EACX,UAAU,EACV,SAAS,EACT,iBAAiB,EACjB,qBAAqB,EACtB,MAAM,2BAA2B,CAAC;AAInC,UAAU,gBAAgB;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC5D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC/D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,GAAG,CAAC,OAAO,CAAC;IAC7C,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,GAAG,CAAC,OAAO,CAAC;IAC3C,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;IACzC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,GAAG,CAAC,OAAO,CAAC;IACzD,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IACpD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,GAAG,CAAC,OAAO,CAAC;IACxD,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,MAAM,EACN,OAAO,EACP,UAAU,EACV,KAAa,EACb,oBAAoB,EACpB,iBAAgC,EAChC,uBAAuB,EACvB,gBAAgB,EAChB,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAS,EACT,MAAM,EACN,eAAe,EACf,MAAM,EACN,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,OAAO,GACR,EAAE,gBAAgB,2CAgHlB"}
+{"version":3,"file":"ChartEditor.d.ts","sourceRoot":"","sources":["../../src/ChartEditor.tsx"],"names":[],"mappings":";AASA,OAAO,EACL,oBAAoB,EACpB,uBAAuB,EACvB,oBAAoB,EACpB,mBAAmB,EACnB,WAAW,EACX,UAAU,EACV,SAAS,EACT,iBAAiB,EACjB,qBAAqB,EAEtB,MAAM,2BAA2B,CAAC;AAKnC,UAAU,gBAAgB;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC5D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC/D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,GAAG,CAAC,OAAO,CAAC;IAC7C,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,GAAG,CAAC,OAAO,CAAC;IAC3C,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;IACzC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,GAAG,CAAC,OAAO,CAAC;IACzD,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IACpD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,GAAG,CAAC,OAAO,CAAC;IACxD,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,MAAM,EACN,OAAO,EACP,UAAU,EACV,KAAa,EACb,oBAAoB,EACpB,iBAAgC,EAChC,uBAAuB,EACvB,wBAAwB,EACxB,gBAAgB,EAChB,cAAc,EACd,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAS,EACT,MAAM,EACN,eAAe,EACf,MAAM,EACN,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,OAAO,GACR,EAAE,gBAAgB,2CA4LlB"}