@quillsql/react 2.11.21 → 2.11.24

package/dist/cjs/ChartBuilder.js

@@ -177,7 +177,13 @@ function ChartBuilderWithModal(props) {
     const Modal = props.ModalComponent ?? UiComponents_1.MemoizedModal;
     (0, react_1.useEffect)(() => {
         function handleResize() {
-            setModalWidth(window.innerWidth - 80);
+            const screenSize = window.innerWidth;
+            if (screenSize >= 1200) {
+                setModalWidth(window.innerWidth - 80);
+            }
+            else {
+                setModalWidth(undefined); // use dynamic width of contents
+            }
             setModalHeight(window.innerHeight - 80);
         }
         handleResize();
@@ -186,7 +192,7 @@ function ChartBuilderWithModal(props) {
             window.removeEventListener('resize', handleResize);
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: parentRef, children: (0, jsx_runtime_1.jsx)(Modal, { isOpen: isOpen, setIsOpen: setIsOpen, title: title || 'Add to dashboard', 
+    return ((0, jsx_runtime_1.jsx)("div", { style: { height: '100%' }, ref: parentRef, children: (0, jsx_runtime_1.jsx)(Modal, { isOpen: isOpen, setIsOpen: setIsOpen, title: title || 'Add to dashboard', 
             // For isHorizontalView, use full viewport size minus 80px for padding,
             // otherwise use the default layout method of the modal (contents).
             width: isHorizontalView ? modalWidth : undefined, height: isHorizontalView ? modalHeight : undefined, children: (0, jsx_runtime_1.jsx)(ChartBuilder, { ...props }) }) }));
@@ -216,14 +222,17 @@ exports.ChartBuilderWithModal = ChartBuilderWithModal;
  * ### Chart Builder API
  * @see https://docs.quillsql.com/components/chart-builder
  */
-function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, SelectComponent = QuillSelect_1.QuillSelectComponent, ButtonComponent = UiComponents_1.MemoizedButton, SecondaryButtonComponent = UiComponents_1.MemoizedSecondaryButton, HeaderComponent = UiComponents_1.MemoizedHeader, LabelComponent = UiComponents_1.MemoizedLabel, DeleteButtonComponent = UiComponents_1.MemoizedDeleteButton, TextComponent = UiComponents_1.MemoizedText, PopoverComponent = UiComponents_1.MemoizedPopover, CardComponent = QuillCard_1.QuillCard, TableComponent = UiComponents_1.QuillTableComponent, ModalComponent, isOpen, isHorizontalView = true, pivot, setIsOpen, rows, columns, query, queryNoDateColumn, dateRange: dr, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, showDashboardDropdown = true, onAddToDashboardComplete, onDelete, fields: fieldsProp, dashboardItem = undefined, recommendedPivots: rp = [], createdPivots: cp = [], destinationDashboard, dateColumn, buttonLabel, organizationName, pivotData, hideDeleteButton = false, hideSubmitButton = false, }) {
+function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, SelectComponent = QuillSelect_1.QuillSelectComponent, ButtonComponent = UiComponents_1.MemoizedButton, SecondaryButtonComponent = UiComponents_1.MemoizedSecondaryButton, HeaderComponent = UiComponents_1.MemoizedHeader, SubHeaderComponent = UiComponents_1.MemoizedSubHeader, LabelComponent = UiComponents_1.MemoizedLabel, DeleteButtonComponent = UiComponents_1.MemoizedDeleteButton, TextComponent = UiComponents_1.MemoizedText, PopoverComponent = UiComponents_1.MemoizedPopover, CardComponent = QuillCard_1.QuillCard, TableComponent = UiComponents_1.QuillTableComponent, ModalComponent, ErrorMessageComponent = UiComponents_1.QuillErrorMessageComponent, ChartBuilderInputRowContainer = UiComponents_1.QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = UiComponents_1.QuillChartBuilderInputColumnContainer, PivotRowContainer = UiComponents_1.QuillPivotRowContainer, PivotColumnContainer = UiComponents_1.QuillPivotColumnContainer, FormContainer = UiComponents_1.QuillChartBuilderFormContainer, isOpen, isHorizontalView = true, pivot, setIsOpen, rows, columns, query, queryNoDateColumn, dateRange: dr, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, showDashboardDropdown = true, onAddToDashboardComplete, onDelete, fields: fieldsProp, dashboardItem = undefined, recommendedPivots: rp = [], createdPivots: cp = [], destinationDashboard, dateColumn, buttonLabel, organizationName, pivotData, hideDeleteButton = false, hideSubmitButton = false, hideDateRangeFilter = false, initialUniqueValues, pivotRecommendationsEnabled = true, }) {
     const dateRange = dr || [null, null, null];
     const [client] = (0, react_1.useContext)(Context_1.ClientContext);
     const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
     const [schema, setSchema] = (0, react_1.useContext)(Context_1.SchemaContext);
     const [windowWidth, setWindowWidth] = (0, react_1.useState)(1200);
     const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
-    const [divWidth, setDivWidth] = (0, react_1.useState)('auto');
+    const [pivotCardWidth, setPivotCardWidth] = (0, react_1.useState)(665);
+    const [formWidth, setFormWidth] = (0, react_1.useState)(665);
+    const inputRef = (0, react_1.useRef)(null);
+    const selectRef = (0, react_1.useRef)(null);
     const { dispatch } = (0, react_1.useContext)(Context_1.DashboardContext);
     const fields = fieldsProp?.map((field) => ({
         field: field.name,
@@ -233,9 +242,8 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
     })) || [];
     const parentRef = (0, react_1.useRef)(null);
     const deleteRef = (0, react_1.useRef)(null);
-    const pivotCardContainer = (0, react_1.useRef)(null);
     const modalPadding = 20;
-    const deleteButtonMargin = -13;
+    const deleteButtonMargin = -12;
     (0, react_1.useEffect)(() => {
         const handleResize = () => setWindowWidth(window.innerWidth);
         handleResize();
@@ -245,56 +253,51 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
         };
     }, []);
     (0, react_1.useEffect)(() => {
-        const calculateWidth = () => pivotCardContainer.current?.getBoundingClientRect().width ?? 'auto';
         const handleResize = () => {
-            if (pivotCardContainer.current) {
-                setDivWidth(calculateWidth());
+            // The pivot card should be the same width as the row of inputs
+            // above it (an input, two selects, plus the gaps between them).
+            if (inputRef.current && selectRef.current) {
+                const inputSize = inputRef.current?.getBoundingClientRect();
+                const selectSize = selectRef.current?.getBoundingClientRect();
+                const selectWidth = selectSize.width;
+                const showDash = showDashboardDropdown && !destinationDashboard;
+                const spaceBetween = selectSize.left - inputSize.right;
+                const gap = showDash ? (spaceBetween - selectWidth) / 2 : spaceBetween;
+                const width = inputSize.width + 2 * gap + 2 * selectWidth;
+                setPivotCardWidth(width);
+                // Calculate the form width by adding the width of the delete button
+                const deleteSize = deleteRef.current?.getBoundingClientRect();
+                const deleteWidth = deleteSize?.width ?? 0;
+                setFormWidth(width + deleteWidth);
             }
         };
         handleResize();
-        window.addEventListener('resize', handleResize);
-        return () => {
-            window.removeEventListener('resize', handleResize);
-        };
-    }, [pivotCardContainer]);
-    // get schema
+    }, [isOpen]);
     (0, react_1.useEffect)(() => {
-        let isSubscribed = true;
-        async function getSchema() {
-            if (!schema || !schema.length) {
-                const { queryEndpoint, queryHeaders, publicKey } = client;
-                const response = await fetch(`${queryEndpoint}`, {
-                    method: 'POST',
-                    headers: {
-                        ...queryHeaders,
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({
-                        metadata: {
-                            clientId: publicKey,
-                            publicKey: publicKey,
-                            task: 'schema',
-                        },
-                    }),
-                });
-                const results = await response.json();
-                if (isSubscribed) {
-                    if (results.data?.data) {
-                        setSchema(results.data.data.tables);
-                    }
-                    else {
-                        setSchema(results.data.tables);
-                    }
-                }
+        const handleResize = () => {
+            // The pivot card should be the same width as the row of inputs
+            // above it (an input, two selects, plus the gaps between them).
+            if (inputRef.current && selectRef.current) {
+                const inputSize = inputRef.current?.getBoundingClientRect();
+                const selectSize = selectRef.current?.getBoundingClientRect();
+                const selectWidth = selectSize.width;
+                const showDash = showDashboardDropdown && !destinationDashboard;
+                const spaceBetween = selectSize.left - inputSize.right;
+                const gap = showDash ? (spaceBetween - selectWidth) / 2 : spaceBetween;
+                const width = inputSize.width + 2 * gap + 2 * selectWidth;
+                setPivotCardWidth(width);
+                // Calculate the form width by adding the width of the delete button
+                const deleteSize = deleteRef.current?.getBoundingClientRect();
+                const deleteWidth = deleteSize?.width ?? 0;
+                setFormWidth(width + deleteWidth);
             }
-        }
-        if (isSubscribed) {
-            getSchema();
-        }
+        };
+        handleResize();
+        window.addEventListener('resize', handleResize);
         return () => {
-            isSubscribed = false;
+            window.removeEventListener('resize', handleResize);
         };
-    }, [schema]);
+    }, []);
     // get dashboards
     const [dashboardOptions, setDashboardOptions] = (0, react_1.useState)([]);
     const [defaultDashboardName, setDefaultDashboardName] = (0, react_1.useState)(destinationDashboard || dashboardItem?.dashboardName || '');
@@ -310,17 +313,18 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
     const [selectedPivotIndex, setSelectedPivotIndex] = (0, react_1.useState)(-1);
     const [tableName, setTableName] = (0, react_1.useState)(undefined);
     const selectedTable = schema?.find((t) => t.displayName === tableName);
-    const [pivotPopUpTitle, setPivotPopUpTitle] = (0, react_1.useState)('Add Pivot');
+    const [pivotPopUpTitle, setPivotPopUpTitle] = (0, react_1.useState)('Add pivot');
     const [createdPivots, setCreatedPivots] = (0, react_1.useState)(pivot ? [pivot] : dashboardItem?.pivot ? [dashboardItem.pivot] : cp);
     const [recommendedPivots, setRecommendedPivots] = (0, react_1.useState)(rp);
-    const [pivotRowField, setPivotRowField] = (0, react_1.useState)(undefined);
-    const [pivotColumnField, setPivotColumnField] = (0, react_1.useState)(undefined);
-    const [pivotValueField, setPivotValueField] = (0, react_1.useState)(undefined);
-    const [pivotAggregation, setPivotAggregation] = (0, react_1.useState)(undefined);
+    const [pivotRowField, setPivotRowField] = (0, react_1.useState)(pivot?.rowField);
+    const [pivotColumnField, setPivotColumnField] = (0, react_1.useState)(pivot?.columnField);
+    const [pivotValueField, setPivotValueField] = (0, react_1.useState)(pivot?.valueField);
+    const [pivotAggregation, setPivotAggregation] = (0, react_1.useState)(pivot?.aggregationType);
     // initial state is the fields array passed in, but can eventually be changed to be the pivot fields
     const [fieldOptions, setFieldOptions] = (0, react_1.useState)(fields);
     const [dateFieldOptions, setDateFieldOptions] = (0, react_1.useState)([]);
     const [allTables, setAllTables] = (0, react_1.useState)([]);
+    const [uniqueValues, setUniqueValues] = (0, react_1.useState)(undefined);
     const [defaultDateField, setDefaultDateField] = (0, react_1.useState)({
         table: dateFieldOptions[0]?.name || '',
         field: dateFieldOptions[0]?.columns[0]?.name || '',
@@ -348,7 +352,7 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
         template: false,
     };
     const updateDashboardFilters = async (dashboardName) => {
-        const { queryEndpoint, queryHeaders, publicKey } = client;
+        const { queryEndpoint, queryHeaders, publicKey, customerId } = client;
         if (queryEndpoint) {
             const response = await fetch(queryEndpoint, {
                 method: 'POST',
@@ -358,7 +362,7 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
                 },
                 body: JSON.stringify({
                     metadata: {
-                        orgId: '*',
+                        orgId: customerId || '*',
                         task: 'config',
                         name: dashboardName,
                         clientId: publicKey,
@@ -375,10 +379,13 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
     };
     const pivotFormData = (pivot) => {
         const yAxisField = pivot.columnField || pivot.valueField;
+        const yAxisLabel = dashboardItem?.yAxisFields?.length > 0
+            ? dashboardItem.yAxisFields[0].label
+            : pivot.valueField;
         // date labels for pivots should be treated like strings since they are
         // formatted in generatePivotTable
         const yAxisIsDate = pivot.columnField
-            ? (0, PivotModal_1.isDateField)(pivot.columnFieldType)
+            ? (0, PivotModal_1.isDateField)(pivot.columnFieldType || '')
             : false;
         const chartType = dashboardItem?.chartType ?? (pivot.rowField ? 'column' : 'metric');
         return {
@@ -389,21 +396,28 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
                 ? 'string'
                 : columns.find((col) => col.field === pivot.rowField)?.format ||
                     'whole_number',
-            xAxisLabel: '',
+            xAxisLabel: dashboardItem?.xAxisLabel || pivot.rowField,
             yAxisFields: [
                 {
                     field: yAxisField,
-                    label: '',
+                    label: yAxisLabel,
                     format: yAxisIsDate
                         ? 'string'
-                        : columns.find((col) => col.field === yAxisField)?.format ||
-                            'whole_number',
+                        : dashboardItem?.yAxisFields?.length > 0
+                            ? dashboardItem?.yAxisFields[0].format
+                            : columns.find((col) => col.field === pivot.valueField)?.format ||
+                                'whole_number',
                 },
             ],
         };
     };
     const [formData, setFormData] = (0, react_1.useState)(pivot
-        ? { ...formEmptyState, ...dashboardItem, ...pivotFormData(pivot) }
+        ? {
+            ...formEmptyState,
+            ...dashboardItem,
+            ...pivotFormData(pivot),
+            ...(destinationDashboard && { dashboardName: destinationDashboard }),
+        }
         : dashboardItem || formEmptyState);
     (0, react_1.useEffect)(() => {
         async function getFormData() {
@@ -412,27 +426,46 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
             const dashboardOptions = resp.dashboardNames
                 .filter((elem) => elem !== null)
                 .map((key) => ({ label: key, value: key }));
-            await updateDashboardFilters(dashboardItem
+            await updateDashboardFilters(destinationDashboard ?? dashboardItem
                 ? dashboardItem.dashboardName
                 : dashboardOptions[0]?.label);
             setDashboardOptions(dashboardOptions);
-            const dashboardName = dashboardItem
+            const dashboardName = destinationDashboard ?? dashboardItem
                 ? dashboardItem?.dashboardName
                 : dashboardOptions[0]?.label;
             curFormData.dashboardName = dashboardName;
-            setDefaultDashboardName(dashboardItem
+            setDefaultDashboardName(destinationDashboard ?? dashboardItem
                 ? dashboardItem?.dashboardName
                 : dashboardOptions[0]?.label);
-            // setFormData({
-            //   ...formData,
-            //   dashboardName: dashboardItem
-            //     ? dashboardItem?.dashboardName
-            //     : dashboardOptions[0]?.label,
-            // });
+            const { queryEndpoint, queryHeaders, publicKey } = client;
+            const response = await fetch(`${queryEndpoint}`, {
+                method: 'POST',
+                headers: {
+                    ...queryHeaders,
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    metadata: {
+                        clientId: publicKey,
+                        publicKey: publicKey,
+                        task: 'schema',
+                    },
+                }),
+            });
+            const schemaInfo = await response.json();
+            let schemaData = schemaInfo.data?.data;
+            if (schemaInfo.data?.data) {
+                schemaData = schemaInfo.data.data.tables;
+                setSchema(schemaInfo.data.data.tables);
+            }
+            else {
+                schemaData = schemaInfo.data.tables;
+                setSchema(schemaInfo.data.tables);
+            }
             if (!query) {
                 return;
             }
-            const result = await getReferencedTables(client, query, schema, true);
+            const result = await getReferencedTables(client, query, schemaData, true);
             setDateFieldOptions(result);
             if (result[0] && result[0].columns[0]) {
                 setDefaultDateField({
@@ -440,7 +473,7 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
                     field: result[0].columns[0].name,
                 });
             }
-            const allReferencedFields = await getReferencedTables(client, query, schema, false);
+            const allReferencedFields = await getReferencedTables(client, query, schemaData, false);
             setAllTables(allReferencedFields.map((table) => table.name));
             setTableName(result[0]?.name);
             const dateField = {
@@ -452,6 +485,9 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
             curFormData.dateField = dateField;
             setFormData({
                 ...curFormData,
+                dashboardName: dashboardItem
+                    ? dashboardItem?.dashboardName
+                    : dashboardOptions[0]?.label,
             });
         }
         getFormData();
@@ -493,6 +529,8 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
             });
         }
         else {
+            if (!rows)
+                return [];
             return rows.map((row) => {
                 return formData.columns.reduce((formattedRow, column) => {
                     // Apply the format function to each field in the row
@@ -589,16 +627,30 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
         }
     };
     const handleAddPivot = (pivot) => {
+        const newPivotFormData = pivotFormData(pivot);
+        // Only keep the old chart type if the shapes of the pivots are the same
+        // since the valid chart types for some pivots might have changed (eg. going
+        // from a 1D pivot to a 2D pivot would make bar lists not an option).
+        // They don't have to have the same value, just same 'truthiness'.
+        const isPivotSameShape = Boolean(formData.pivot?.rowField) === Boolean(pivot.rowField) &&
+            Boolean(formData.pivot?.columnField) === Boolean(pivot.columnField);
+        const isNewChartType = formData.chartType !== newPivotFormData.chartType;
+        const keepOldChartType = isNewChartType && isPivotSameShape;
         setFormData((formData) => ({
             ...formData,
-            ...pivotFormData(pivot),
+            ...newPivotFormData,
+            ...(keepOldChartType && { chartType: formData.chartType }),
         }));
     };
     const handleDeletePivot = () => {
         if (!formData.pivot) {
             return;
         }
-        setFormData({ ...formEmptyState, pivot: null });
+        setFormData({
+            ...formEmptyState,
+            dashboardName: formData.dashboardName,
+            pivot: null,
+        });
     };
     const handleAddField = (fieldName) => {
         if (fieldName === 'columns') {
@@ -759,7 +811,12 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
         setIsOpen(false);
         setIsSubmitting(false);
         if (onAddToDashboardComplete) {
-            onAddToDashboardComplete();
+            onAddToDashboardComplete({
+                ...resp,
+                rows,
+                fieldOptions,
+                filtersApplied: dashboardFilters,
+            });
         }
     };
     // Prevent horizontal view on small screens.
@@ -786,56 +843,63 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
                             display: 'flex',
                             flexDirection: 'column',
                             gap: '20px',
+                            height: isHorizontalView || !isOpen ? '100%' : 800,
                             ...(isHorizontalView && {
                                 flexGrow: 1,
-                                maxWidth: !isOpen ? '100%' : 'calc(100% - 665px - 20px)', // width of left sidebar plus gap
+                                maxWidth: !isOpen ? '100%' : `calc(100% - ${formWidth}px - 20px)`, // width of left sidebar plus gap
                             }),
-                        }, children: [(!isHorizontalView || formData.chartType !== 'table') && ((0, jsx_runtime_1.jsx)(Chart_1.default, { colors: theme.chartColors, config: { ...formData, rows }, containerStyle: {
+                            ...(!isHorizontalView && isOpen && { width: formWidth }),
+                        }, children: [((!isHorizontalView && windowWidth >= 1200) ||
+                                formData.chartType !== 'table') && ((0, jsx_runtime_1.jsx)(Chart_1.default, { colors: theme.chartColors, config: { ...formData, rows }, hideDateRangeFilter: hideDateRangeFilter, containerStyle: {
                                     width: '100%',
                                     height: formData.chartType === 'metric'
                                         ? 100
-                                        : isHorizontalView
+                                        : isHorizontalView || !isOpen
                                             ? 'calc(50% - 10px)'
                                             : 400,
                                     ...(isHorizontalView && { flexGrow: 1 }),
                                 } })), 
                             // Make sure to display non-pivoted table when using pivot chart
-                            isHorizontalView && ((0, jsx_runtime_1.jsx)("div", { style: {
+                            (isHorizontalView || windowWidth < 1200) && ((0, jsx_runtime_1.jsx)("div", { style: {
                                     width: '100%',
-                                    height: 'calc(50% - 10px)',
+                                    height: isHorizontalView || !isOpen ? 'calc(50% - 10px)' : 400,
                                     flexGrow: 1,
                                 }, children: formData.chartType !== 'table' ? ((0, jsx_runtime_1.jsx)(TableComponent, { rows: formattedRows, columns: formData.columns })) : ((0, jsx_runtime_1.jsx)(TableComponent, { rows: formattedRows, columns: selectedPivotTable
                                         ? selectedPivotTable.columns
                                         : formData.columns })) }))] }), isOpen && ((0, jsx_runtime_1.jsxs)("form", { ref: parentRef, id: "quill-chart-form", onSubmit: handleSubmit, style: {
                             display: 'flex',
                             flexDirection: 'column',
-                            height: '100%',
+                            gap: 20,
                             ...(isHorizontalView && {
-                                minWidth: 665,
-                                maxWidth: 665,
-                                width: 665,
-                                gap: 20,
+                                height: '100%',
+                                minWidth: formWidth,
+                                maxWidth: formWidth,
+                                width: formWidth,
                             }),
-                        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { overflow: 'auto' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(LabelComponent, { label: "Name" }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: "chart-builder-name", width: 200, value: formData.name, onChange: (e) => handleChange(e.target.value, 'name'), placeholder: "Name" })] }), showDashboardDropdown && !destinationDashboard && ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(LabelComponent, { label: "Dashboard" }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: formData.dashboardName || '', onChange: async (e) => {
-                                                            handleChange(e.target.value, 'dashboardName');
-                                                            await updateDashboardFilters(e.target.value);
-                                                        }, options: dashboardOptions.map((elem) => ({
-                                                            label: elem.label,
-                                                            value: elem.label,
-                                                        })), width: 200 })] })), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(LabelComponent, { label: "Chart type" }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: formData.chartType, onChange: (e) => handleChange(e.target.value, 'chartType'), 
-                                                        // filter out metric for all pivots
-                                                        // filter out bar and pie for row and column pivot
-                                                        options: getChartTypeOptions(formData), width: 200 })] })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("div", { style: {
+                            ...(windowWidth < 1200 && {
+                                width: formWidth,
+                                paddingTop: modalPadding,
+                                paddingBottom: modalPadding,
+                            }),
+                        }, children: [(0, jsx_runtime_1.jsxs)(FormContainer, { children: [(0, jsx_runtime_1.jsxs)(ChartBuilderInputRowContainer, { children: [(0, jsx_runtime_1.jsx)("div", { ref: inputRef, style: { display: 'flex', flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(TextInputComponent, { id: "chart-builder-name", label: "Name", width: 200, value: formData.name, onChange: (e) => handleChange(e.target.value, 'name'), placeholder: "Name" }) }), showDashboardDropdown && !destinationDashboard && ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(SelectComponent, { label: "Dashboard", value: formData.dashboardName || '', onChange: async (e) => {
+                                                        handleChange(e.target.value, 'dashboardName');
+                                                        await updateDashboardFilters(e.target.value);
+                                                    }, options: dashboardOptions.map((elem) => ({
+                                                        label: elem.label,
+                                                        value: elem.label,
+                                                    })), width: 200 }) })), (0, jsx_runtime_1.jsx)("div", { ref: selectRef, style: { display: 'flex', flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(SelectComponent, { label: "Chart type", value: formData.chartType, onChange: (e) => handleChange(e.target.value, 'chartType'), 
+                                                    // filter out metric for all pivots
+                                                    // filter out bar and pie for row and column pivot
+                                                    options: getChartTypeOptions(formData), width: 200 }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
-                                            gap: 12,
-                                            marginTop: 6,
+                                            gap: 6,
                                         }, children: [(0, jsx_runtime_1.jsx)(HeaderComponent, { label: "Pivot" }), (0, jsx_runtime_1.jsxs)("div", { style: { fontFamily: theme?.fontFamily }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
                                                             maxWidth: 200,
                                                             // marginTop: 6,
                                                             display: 'flex',
                                                             flexDirection: 'column',
-                                                        }, children: (0, jsx_runtime_1.jsx)(PivotModal_1.PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: selectedTable, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, CardComponent: CardComponent, SecondaryButtonComponent: SecondaryButtonComponent, PopoverComponent: PopoverComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent, 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 && ((0, jsx_runtime_1.jsx)("div", { ref: pivotCardContainer, children: (0, jsx_runtime_1.jsx)("div", { style: { width: !isHorizontalView ? divWidth : 'auto' }, children: (0, jsx_runtime_1.jsx)(PivotList_1.PivotCard, { pivotTable: {
+                                                        }, children: (0, jsx_runtime_1.jsx)(PivotModal_1.PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: selectedTable, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, CardComponent: CardComponent, SecondaryButtonComponent: SecondaryButtonComponent, PopoverComponent: PopoverComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, 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, query: query, pivotCountRequest: 4, initialUniqueValues: initialUniqueValues, initialSelectedPivotTable: selectedPivotTable, pivotRecommendationsEnabled: pivotRecommendationsEnabled }) }), formData.pivot && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { style: { width: pivotCardWidth }, children: (0, jsx_runtime_1.jsx)(PivotList_1.PivotCard, { pivotTable: {
                                                                     pivot: formData.pivot,
                                                                     rows: selectedPivotTable?.rows,
                                                                     columns: selectedPivotTable?.columns,
@@ -846,127 +910,97 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
                                                                     setPivotColumnField(formData.pivot?.columnField);
                                                                     setPivotValueField(formData.pivot?.valueField);
                                                                     setPivotAggregation(formData.pivot?.aggregationType);
-                                                                    setPivotPopUpTitle('Edit Pivot');
-                                                                }, selectedPivotIndex: -1, onEditPivot: () => { }, CardComponent: CardComponent, ButtonComponent: ButtonComponent, HeaderComponent: HeaderComponent, showEdit: false, onClose: handleDeletePivot, minHeight: 180, LabelComponent: LabelComponent, TextComponent: TextComponent }) }) }))] })] }), (0, jsx_runtime_1.jsx)("br", {}), (formData.pivot || formData.chartType !== 'table') && ((0, jsx_runtime_1.jsxs)("div", { children: [CHART_TO_LABELS[formData.chartType]?.xAxisLabel && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                                                    setPivotPopUpTitle('Edit pivot');
+                                                                }, selectedPivotIndex: -1, onEditPivot: () => { }, CardComponent: CardComponent, ButtonComponent: ButtonComponent, HeaderComponent: HeaderComponent, showEdit: false, onClose: handleDeletePivot, minHeight: 180, LabelComponent: LabelComponent, TextComponent: TextComponent }) }) }))] })] }), (formData.pivot || formData.chartType !== 'table') && ((0, jsx_runtime_1.jsxs)("div", { children: [CHART_TO_LABELS[formData.chartType]?.xAxisLabel && ((0, jsx_runtime_1.jsx)("div", { style: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
-                                                    gap: 6,
-                                                    marginTop: 6,
-                                                }, children: (0, jsx_runtime_1.jsx)(HeaderComponent, { label: "Chart" }) })), CHART_TO_LABELS[formData.chartType]?.xAxisLabel && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(LabelComponent, { label: CHART_TO_LABELS[formData.chartType]?.xAxisLabel ?? '' }), (0, jsx_runtime_1.jsxs)("div", { style: {
-                                                            display: 'flex',
-                                                            flexDirection: 'row',
-                                                            gap: 12,
-                                                        }, children: [(0, jsx_runtime_1.jsx)(SelectComponent, { value: formData.xAxisField, onChange: (e) => handleChange(e.target.value, 'xAxisField'), options: formData.pivot
+                                                }, children: (0, jsx_runtime_1.jsx)(HeaderComponent, { label: "Chart" }) })), CHART_TO_LABELS[formData.chartType]?.xAxisLabel && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(SubHeaderComponent, { label: CHART_TO_LABELS[formData.chartType]?.xAxisLabel ?? '' }), (0, jsx_runtime_1.jsxs)(ChartBuilderInputRowContainer, { children: [(0, jsx_runtime_1.jsx)(SelectComponent, { value: formData.xAxisField, onChange: (e) => handleChange(e.target.value, 'xAxisField'), options: formData.pivot
                                                                     ? getPivotMetricOptions(formData.pivot)
                                                                     : fieldOptions.map((elem) => ({
                                                                         label: elem.field,
                                                                         value: elem.field,
-                                                                    })), width: 200 }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: "chart-builder-x-axis-label", width: 200, value: formData.pivot
-                                                                    ? formData.pivot.rowField
-                                                                    : formData.xAxisLabel, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'xAxisLabel') }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: formData.pivot &&
+                                                                    })), width: 200 }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: "chart-builder-x-axis-label", width: 200, value: formData.xAxisLabel, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'xAxisLabel') }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: formData.pivot &&
                                                                     (0, PivotModal_1.isDateField)(formData.pivot.rowFieldType)
                                                                     ? 'pivot_date'
                                                                     : formData.xAxisFormat, onChange: (e) => handleChange(e.target.value, 'xAxisFormat'), options: formData.pivot &&
                                                                     (0, PivotModal_1.isDateField)(formData.pivot.rowFieldType)
                                                                     ? [{ value: 'pivot_date', label: 'date' }]
-                                                                    : formatOptions, width: 200 })] }, 'xAxisField'), (0, jsx_runtime_1.jsx)("br", {})] })), CHART_TO_LABELS[formData.chartType]?.yAxisLabel && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(LabelComponent, { label: CHART_TO_LABELS[formData.chartType]?.yAxisLabel ?? '' }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                                            display: 'flex',
-                                                            flexDirection: 'column',
-                                                            gap: 10,
-                                                        }, children: formData.yAxisFields.map((yAxisField, index) => ((0, jsx_runtime_1.jsxs)("div", { style: {
-                                                                display: 'flex',
-                                                                flexDirection: 'row',
-                                                                gap: 12,
-                                                            }, children: [(0, jsx_runtime_1.jsx)(SelectComponent, { value: formData.pivot
-                                                                        ? formData.pivot.valueField
-                                                                        : yAxisField.field, onChange: (e) => handleChange(e.target.value, 'yAxisFields.field', index), options: formData.pivot
-                                                                        ? [
-                                                                            {
-                                                                                label: `Pivot Column (${formData.pivot.valueField})`,
-                                                                                value: formData.pivot.valueField,
-                                                                            },
-                                                                        ]
-                                                                        : fieldOptions
-                                                                            .filter((elem) => {
-                                                                            return exports.numberFormatOptions.includes(columns.find((col) => col.field === elem.field)?.format || '');
-                                                                        })
-                                                                            .map((elem) => ({
-                                                                            label: elem.field,
-                                                                            value: elem.field,
-                                                                        })), width: 200 }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: "chart-builder-y-axis-label", width: 200, value: formData.pivot?.valueField || yAxisField.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'yAxisFields.label', index) }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: formData.pivot
-                                                                        ? NUMBER_OPTIONS.find((option) => {
-                                                                            return (option.value === yAxisField.format);
-                                                                        })
-                                                                            ? // @ts-ignore
-                                                                                NUMBER_OPTIONS.find((option) => option.value === yAxisField.format).value
-                                                                            : 'whole_number'
-                                                                        : yAxisField.format, onChange: (e) => handleChange(e.target.value, 'yAxisFields.format', index), options: formData.pivot
-                                                                        ? NUMBER_OPTIONS
-                                                                        : formatOptions, width: 200 }), formData.pivot === null && ((0, jsx_runtime_1.jsx)("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: (0, jsx_runtime_1.jsx)(DeleteButtonComponent, { onClick: () => handleRemoveField('yAxisFields', index) }) }))] }, 'yAxisField' + index))) }), formData.pivot === null && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => handleAddField('yAxisFields'), label: "Add field +" })] }))] })), (0, jsx_runtime_1.jsx)("br", {})] })), isHorizontalView && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                                                    : formatOptions, width: 200 })] })] })), CHART_TO_LABELS[formData.chartType]?.yAxisLabel && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(SubHeaderComponent, { label: CHART_TO_LABELS[formData.chartType]?.yAxisLabel ?? '' }), (0, jsx_runtime_1.jsxs)(ChartBuilderInputColumnContainer, { children: [formData.yAxisFields.map((yAxisField, index) => ((0, jsx_runtime_1.jsxs)(ChartBuilderInputRowContainer, { children: [(0, jsx_runtime_1.jsx)(SelectComponent, { value: formData.pivot
+                                                                            ? formData.pivot.valueField || 'count'
+                                                                            : yAxisField.field, onChange: (e) => handleChange(e.target.value, 'yAxisFields.field', index), options: formData.pivot
+                                                                            ? [
+                                                                                {
+                                                                                    label: `Pivot Column (${formData.pivot.valueField || 'count'})`,
+                                                                                    value: formData.pivot.valueField ||
+                                                                                        'count',
+                                                                                },
+                                                                            ]
+                                                                            : fieldOptions
+                                                                                .filter((elem) => {
+                                                                                return exports.numberFormatOptions.includes(columns.find((col) => col.field === elem.field)?.format || '');
+                                                                            })
+                                                                                .map((elem) => ({
+                                                                                label: elem.field,
+                                                                                value: elem.field,
+                                                                            })), width: 200 }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: "chart-builder-y-axis-label", width: 200, value: yAxisField.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'yAxisFields.label', index) }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: formData.pivot
+                                                                            ? NUMBER_OPTIONS.find((option) => {
+                                                                                return (option.value === yAxisField.format);
+                                                                            })
+                                                                                ? // @ts-ignore
+                                                                                    NUMBER_OPTIONS.find((option) => option.value === yAxisField.format).value
+                                                                                : ''
+                                                                            : yAxisField.format, onChange: (e) => handleChange(e.target.value, 'yAxisFields.format', index), options: formData.pivot
+                                                                            ? NUMBER_OPTIONS
+                                                                            : formatOptions, width: 200 }), formData.pivot === null && ((0, jsx_runtime_1.jsx)("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: (0, jsx_runtime_1.jsx)(DeleteButtonComponent, { onClick: () => handleRemoveField('yAxisFields', index) }) }))] }, 'yAxisField' + index))), formData.pivot === null && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => handleAddField('yAxisFields'), label: "Add field +" }) }))] })] }))] })), showTableFormatOptions && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
-                                                    gap: 6,
-                                                    marginTop: 6,
-                                                }, children: [(0, jsx_runtime_1.jsx)(HeaderComponent, { label: "Table" }), (0, jsx_runtime_1.jsx)(LabelComponent, { label: "Columns" })] }), (0, jsx_runtime_1.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) => ((0, jsx_runtime_1.jsxs)("div", { style: {
-                                                                display: 'flex',
-                                                                flexDirection: 'row',
-                                                                gap: 12,
-                                                            }, children: [(0, jsx_runtime_1.jsx)(SelectComponent, { value: column.label, onChange: (e) => handleChange(e.target.value, 'columns.field', index), options: selectedPivotTable.columns.map((elem) => ({
-                                                                        label: elem.label,
-                                                                        value: elem.label,
-                                                                    })), width: 200 }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: `chart-builder-column-label-${index}`, width: 200, value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'columns.label', index) }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: 
-                                                                    // The first index use rowField for the rest of them use value fields
-                                                                    formData.pivot &&
-                                                                        column.field === formData.pivot.rowField
-                                                                        ? formData.pivot &&
-                                                                            (0, PivotModal_1.isDateField)(formData.pivot.rowFieldType)
-                                                                            ? 'pivot_date'
-                                                                            : 'string'
-                                                                        : formData.pivot?.valueFieldType ||
-                                                                            'whole_number', onChange: (e) => handleChange(e.target.value, 'pivotColumn', index), options: formData.pivot && index === 0
-                                                                        ? (0, PivotModal_1.isDateField)(formData.pivot.rowFieldType)
-                                                                            ? [{ label: 'date', value: 'pivot_date' }]
-                                                                            : [{ label: 'string', value: 'string' }]
-                                                                        : [...NUMBER_OPTIONS], width: 200 })] }, 'column' + index)))
-                                                    : formData.columns.map((column, index) => ((0, jsx_runtime_1.jsxs)("div", { style: {
-                                                            display: 'flex',
-                                                            flexDirection: 'row',
-                                                            gap: 12,
-                                                        }, children: [(0, jsx_runtime_1.jsx)(SelectComponent, { value: column.field, onChange: (e) => handleChange(e.target.value, 'columns.field', index), options: fields.map((elem) => ({
-                                                                    label: elem.field,
-                                                                    value: elem.field,
-                                                                })), width: 200 }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: `chart-builder-column-label-${index}`, width: 200, value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'columns.label', index) }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: column.format, onChange: (e) => handleChange(e.target.value, 'columns.format', index), options: formatOptions, width: 200 }), (0, jsx_runtime_1.jsx)("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: (0, jsx_runtime_1.jsx)(DeleteButtonComponent, { onClick: () => handleRemoveField('columns', index) }) })] }, 'column' + index))) }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => handleAddField('columns'), label: "Add column +" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {})] })), showDateFieldOptions && formData.dateField && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                                }, children: [(0, jsx_runtime_1.jsx)(HeaderComponent, { label: "Table" }), (0, jsx_runtime_1.jsx)(SubHeaderComponent, { label: "Columns" })] }), (0, jsx_runtime_1.jsxs)(ChartBuilderInputColumnContainer, { children: [formData.pivot &&
+                                                        selectedPivotTable &&
+                                                        selectedPivotTable.columns &&
+                                                        formData.chartType === 'table'
+                                                        ? // THIS CASE IF FOR PIVOT TABLES ONLY
+                                                            selectedPivotTable.columns.map((column, index) => ((0, jsx_runtime_1.jsxs)(ChartBuilderInputRowContainer, { children: [(0, jsx_runtime_1.jsx)(SelectComponent, { value: column.label, onChange: (e) => handleChange(e.target.value, 'columns.field', index), options: selectedPivotTable.columns.map((elem) => ({
+                                                                            label: elem.label,
+                                                                            value: elem.label,
+                                                                        })), width: 200 }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: `chart-builder-column-label-${index}`, width: 200, value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'columns.label', index) }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: 
+                                                                        // The first index use rowField for the rest of them use value fields
+                                                                        formData.pivot &&
+                                                                            column.field === formData.pivot.rowField
+                                                                            ? formData.pivot &&
+                                                                                (0, PivotModal_1.isDateField)(formData.pivot.rowFieldType)
+                                                                                ? 'pivot_date'
+                                                                                : 'string'
+                                                                            : formData.pivot?.valueFieldType ||
+                                                                                'two_decimal_places', onChange: (e) => handleChange(e.target.value, 'pivotColumn', index), options: formData.pivot && index === 0
+                                                                            ? (0, PivotModal_1.isDateField)(formData.pivot.rowFieldType)
+                                                                                ? [{ label: 'date', value: 'pivot_date' }]
+                                                                                : [{ label: 'string', value: 'string' }]
+                                                                            : [...NUMBER_OPTIONS], width: 200 })] }, 'column' + index)))
+                                                        : formData.columns.map((column, index) => ((0, jsx_runtime_1.jsxs)(ChartBuilderInputRowContainer, { children: [(0, jsx_runtime_1.jsx)(SelectComponent, { value: column.field, onChange: (e) => handleChange(e.target.value, 'columns.field', index), options: columns.map((elem) => ({
+                                                                        label: elem.field,
+                                                                        value: elem.field,
+                                                                    })), width: 200 }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: `chart-builder-column-label-${index}`, width: 200, value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'columns.label', index) }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: column.format, onChange: (e) => handleChange(e.target.value, 'columns.format', index), options: formatOptions, width: 200 }), (0, jsx_runtime_1.jsx)("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: (0, jsx_runtime_1.jsx)(DeleteButtonComponent, { onClick: () => handleRemoveField('columns', index) }) })] }, 'column' + index))), (0, jsx_runtime_1.jsx)("div", { children: !(
+                                                        // hide when pivoted and chartType === 'table'
+                                                        (formData.pivot &&
+                                                            selectedPivotTable &&
+                                                            selectedPivotTable.columns &&
+                                                            formData.chartType === 'table')) && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => handleAddField('columns'), label: "Add column +" })) })] })] })), showDateFieldOptions && formData.dateField && ((0, jsx_runtime_1.jsxs)("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 6,
-                                            marginTop: 6,
-                                        }, children: [(0, jsx_runtime_1.jsx)(HeaderComponent, { label: "Date field" }), (0, jsx_runtime_1.jsxs)("div", { style: {
-                                                    display: 'flex',
-                                                    flexDirection: 'row',
-                                                    gap: 12,
-                                                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(LabelComponent, { label: "Table" }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: formData.dateField?.table, onChange: (e) => handleChange(e.target.value, 'dateField.table'), options: dateFieldOptions.map((elem) => ({
-                                                                    label: elem.name,
-                                                                    value: elem.name,
-                                                                })), width: 200 })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(LabelComponent, { label: "Field" }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: (0, textProcessing_1.removeDoubleQuotes)(formData.dateField?.field), onChange: (e) => handleChange(e.target.value, 'dateField.field'), options: dateFieldOptions
-                                                                    ?.find((elem) => elem.name === formData.dateField?.table)
-                                                                    ?.columns?.map((elem) => ({
-                                                                    label: elem.name,
-                                                                    value: elem.name,
-                                                                })) || [], width: 200 })] })] }), (0, jsx_runtime_1.jsx)("br", {})] })), showAccessControlOptions && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                        }, children: [(0, jsx_runtime_1.jsx)(HeaderComponent, { label: "Date field" }), (0, jsx_runtime_1.jsxs)(ChartBuilderInputRowContainer, { children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(SelectComponent, { label: "Table", value: formData.dateField?.table, onChange: (e) => handleChange(e.target.value, 'dateField.table'), options: dateFieldOptions.map((elem) => ({
+                                                                label: elem.name,
+                                                                value: elem.name,
+                                                            })), width: 200 }) }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(SelectComponent, { label: "Field", value: (0, textProcessing_1.removeDoubleQuotes)(formData.dateField?.field), onChange: (e) => handleChange(e.target.value, 'dateField.field'), options: dateFieldOptions
+                                                                ?.find((elem) => elem.name === formData.dateField?.table)
+                                                                ?.columns?.map((elem) => ({
+                                                                label: elem.name,
+                                                                value: elem.name,
+                                                            })) || [], width: 200 }) })] })] })), showAccessControlOptions && ((0, jsx_runtime_1.jsxs)("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 12,
-                                            marginTop: 6,
-                                        }, children: [(0, jsx_runtime_1.jsx)(HeaderComponent, { label: "Organization access" }), (0, jsx_runtime_1.jsx)(SegmentedControl, { onChange: (e) => handleChange(e, 'template'), value: formData.template, theme: theme, organizationName: organizationName })] }))] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                        }, children: [(0, jsx_runtime_1.jsx)(HeaderComponent, { label: "Organization access" }), (0, jsx_runtime_1.jsx)(SegmentedControl, { onChange: (e) => handleChange(e, 'template'), value: formData.template || !organizationName, theme: theme, organizationName: organizationName })] }))] }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'row',
                                     justifyContent: 'flex-end',
@@ -1051,7 +1085,7 @@ function DashboardFilterModal({ isOpen, setIsOpen, issues, ModalComponent = UiCo
                 padding: '20px',
                 boxSizing: 'border-box',
                 overflow: 'scroll',
-            }, children: [issues.map((issue, index) => ((0, jsx_runtime_1.jsx)("span", { style: { paddingTop: '10px' }, children: issue }, issue))), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: {
+            }, children: [issues.map((issue, index) => ((0, jsx_runtime_1.jsx)("span", { style: { paddingTop: '10px' }, children: issue }, issue))), (0, jsx_runtime_1.jsx)("div", { style: {
                         display: 'flex',
                         flexDirection: 'row',
                         gap: '12px',