@quillsql/react 2.11.23 → 2.11.24

package/dist/esm/ChartBuilder.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable no-unused-vars */
 import { useEffect, useRef, useState, useContext, useMemo, } from 'react';
 import { ClientContext, DashboardContext, DashboardFiltersContext, SchemaContext, ThemeContext, } from './Context';
@@ -7,7 +7,7 @@ import { getPostgresBasicType } from './components/ReportBuilder/util';
 import { PivotModal, generatePivotTable, isDateField, } from './internals/ReportBuilder/PivotModal';
 import { PivotCard } from './internals/ReportBuilder/PivotList';
 import Chart from './Chart';
-import { MemoizedModal, QuillTextInput, MemoizedButton, MemoizedSecondaryButton, MemoizedHeader, MemoizedLabel, MemoizedDeleteButton, MemoizedText, MemoizedPopover, QuillTableComponent, } from './components/UiComponents';
+import { MemoizedModal, QuillTextInput, MemoizedButton, MemoizedSecondaryButton, MemoizedHeader, MemoizedLabel, MemoizedDeleteButton, MemoizedText, MemoizedPopover, QuillTableComponent, QuillChartBuilderInputRowContainer, QuillChartBuilderInputColumnContainer, MemoizedSubHeader, QuillErrorMessageComponent, QuillPivotRowContainer, QuillPivotColumnContainer, QuillChartBuilderFormContainer, } from './components/UiComponents';
 import { mergeComparisonRange } from './utils/merge';
 import { removeDoubleQuotes, snakeCaseToTitleCase, } from './utils/textProcessing';
 import { QuillSelectComponent } from './components/QuillSelect';
@@ -176,7 +176,7 @@ export function ChartBuilderWithModal(props) {
                 setModalWidth(window.innerWidth - 80);
             }
             else {
-                setModalWidth(705); // width of the form + padding
+                setModalWidth(undefined); // use dynamic width of contents
             }
             setModalHeight(window.innerHeight - 80);
         }
@@ -186,7 +186,7 @@ export function ChartBuilderWithModal(props) {
             window.removeEventListener('resize', handleResize);
         };
     }, []);
-    return (_jsx("div", { ref: parentRef, children: _jsx(Modal, { isOpen: isOpen, setIsOpen: setIsOpen, title: title || 'Add to dashboard', 
+    return (_jsx("div", { style: { height: '100%' }, ref: parentRef, children: _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: _jsx(ChartBuilder, { ...props }) }) }));
@@ -215,14 +215,17 @@ export function ChartBuilderWithModal(props) {
  * ### Chart Builder API
  * @see https://docs.quillsql.com/components/chart-builder
  */
-export default function ChartBuilder({ TextInputComponent = QuillTextInput, SelectComponent = QuillSelectComponent, ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, HeaderComponent = MemoizedHeader, LabelComponent = MemoizedLabel, DeleteButtonComponent = MemoizedDeleteButton, TextComponent = MemoizedText, PopoverComponent = MemoizedPopover, CardComponent = QuillCard, TableComponent = 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, }) {
+export default function ChartBuilder({ TextInputComponent = QuillTextInput, SelectComponent = QuillSelectComponent, ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, HeaderComponent = MemoizedHeader, SubHeaderComponent = MemoizedSubHeader, LabelComponent = MemoizedLabel, DeleteButtonComponent = MemoizedDeleteButton, TextComponent = MemoizedText, PopoverComponent = MemoizedPopover, CardComponent = QuillCard, TableComponent = QuillTableComponent, ModalComponent, ErrorMessageComponent = QuillErrorMessageComponent, ChartBuilderInputRowContainer = QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = QuillChartBuilderInputColumnContainer, PivotRowContainer = QuillPivotRowContainer, PivotColumnContainer = QuillPivotColumnContainer, FormContainer = 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] = useContext(ClientContext);
     const [theme] = useContext(ThemeContext);
     const [schema, setSchema] = useContext(SchemaContext);
     const [windowWidth, setWindowWidth] = useState(1200);
     const [isSubmitting, setIsSubmitting] = useState(false);
-    const [divWidth, setDivWidth] = useState('auto');
+    const [pivotCardWidth, setPivotCardWidth] = useState(665);
+    const [formWidth, setFormWidth] = useState(665);
+    const inputRef = useRef(null);
+    const selectRef = useRef(null);
     const { dispatch } = useContext(DashboardContext);
     const fields = fieldsProp?.map((field) => ({
         field: field.name,
@@ -232,9 +235,8 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
     })) || [];
     const parentRef = useRef(null);
     const deleteRef = useRef(null);
-    const pivotCardContainer = useRef(null);
     const modalPadding = 20;
-    const deleteButtonMargin = -13;
+    const deleteButtonMargin = -12;
     useEffect(() => {
         const handleResize = () => setWindowWidth(window.innerWidth);
         handleResize();
@@ -244,58 +246,51 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
         };
     }, []);
     useEffect(() => {
-        const calculateWidth = () => pivotCardContainer.current?.getBoundingClientRect().width ??
-            240 - 40 ??
-            'calc(100% - 40px)';
         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]);
     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] = useState([]);
     const [defaultDashboardName, setDefaultDashboardName] = useState(destinationDashboard || dashboardItem?.dashboardName || '');
@@ -311,17 +306,18 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
     const [selectedPivotIndex, setSelectedPivotIndex] = useState(-1);
     const [tableName, setTableName] = useState(undefined);
     const selectedTable = schema?.find((t) => t.displayName === tableName);
-    const [pivotPopUpTitle, setPivotPopUpTitle] = useState('Add Pivot');
+    const [pivotPopUpTitle, setPivotPopUpTitle] = useState('Add pivot');
     const [createdPivots, setCreatedPivots] = useState(pivot ? [pivot] : dashboardItem?.pivot ? [dashboardItem.pivot] : cp);
     const [recommendedPivots, setRecommendedPivots] = useState(rp);
-    const [pivotRowField, setPivotRowField] = useState(undefined);
-    const [pivotColumnField, setPivotColumnField] = useState(undefined);
-    const [pivotValueField, setPivotValueField] = useState(undefined);
-    const [pivotAggregation, setPivotAggregation] = useState(undefined);
+    const [pivotRowField, setPivotRowField] = useState(pivot?.rowField);
+    const [pivotColumnField, setPivotColumnField] = useState(pivot?.columnField);
+    const [pivotValueField, setPivotValueField] = useState(pivot?.valueField);
+    const [pivotAggregation, setPivotAggregation] = useState(pivot?.aggregationType);
     // initial state is the fields array passed in, but can eventually be changed to be the pivot fields
     const [fieldOptions, setFieldOptions] = useState(fields);
     const [dateFieldOptions, setDateFieldOptions] = useState([]);
     const [allTables, setAllTables] = useState([]);
+    const [uniqueValues, setUniqueValues] = useState(undefined);
     const [defaultDateField, setDefaultDateField] = useState({
         table: dateFieldOptions[0]?.name || '',
         field: dateFieldOptions[0]?.columns[0]?.name || '',
@@ -349,7 +345,7 @@ export default function ChartBuilder({ TextInputComponent = 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',
@@ -359,7 +355,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
                 },
                 body: JSON.stringify({
                     metadata: {
-                        orgId: '*',
+                        orgId: customerId || '*',
                         task: 'config',
                         name: dashboardName,
                         clientId: publicKey,
@@ -376,10 +372,13 @@ export default function ChartBuilder({ TextInputComponent = 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
-            ? isDateField(pivot.columnFieldType)
+            ? isDateField(pivot.columnFieldType || '')
             : false;
         const chartType = dashboardItem?.chartType ?? (pivot.rowField ? 'column' : 'metric');
         return {
@@ -390,21 +389,28 @@ export default function ChartBuilder({ TextInputComponent = 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] = useState(pivot
-        ? { ...formEmptyState, ...dashboardItem, ...pivotFormData(pivot) }
+        ? {
+            ...formEmptyState,
+            ...dashboardItem,
+            ...pivotFormData(pivot),
+            ...(destinationDashboard && { dashboardName: destinationDashboard }),
+        }
         : dashboardItem || formEmptyState);
     useEffect(() => {
         async function getFormData() {
@@ -413,27 +419,46 @@ export default function ChartBuilder({ TextInputComponent = 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({
@@ -441,7 +466,7 @@ export default function ChartBuilder({ TextInputComponent = 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 = {
@@ -453,6 +478,9 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
             curFormData.dateField = dateField;
             setFormData({
                 ...curFormData,
+                dashboardName: dashboardItem
+                    ? dashboardItem?.dashboardName
+                    : dashboardOptions[0]?.label,
             });
         }
         getFormData();
@@ -494,6 +522,8 @@ export default function ChartBuilder({ TextInputComponent = 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
@@ -590,16 +620,30 @@ export default function ChartBuilder({ TextInputComponent = 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') {
@@ -760,7 +804,12 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
         setIsOpen(false);
         setIsSubmitting(false);
         if (onAddToDashboardComplete) {
-            onAddToDashboardComplete();
+            onAddToDashboardComplete({
+                ...resp,
+                rows,
+                fieldOptions,
+                filtersApplied: dashboardFilters,
+            });
         }
     };
     // Prevent horizontal view on small screens.
@@ -787,13 +836,14 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
                             display: 'flex',
                             flexDirection: 'column',
                             gap: '20px',
-                            height: '100%',
+                            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
                             }),
+                            ...(!isHorizontalView && isOpen && { width: formWidth }),
                         }, children: [((!isHorizontalView && windowWidth >= 1200) ||
-                                formData.chartType !== 'table') && (_jsx(Chart, { colors: theme.chartColors, config: { ...formData, rows }, containerStyle: {
+                                formData.chartType !== 'table') && (_jsx(Chart, { colors: theme.chartColors, config: { ...formData, rows }, hideDateRangeFilter: hideDateRangeFilter, containerStyle: {
                                     width: '100%',
                                     height: formData.chartType === 'metric'
                                         ? 100
@@ -812,40 +862,37 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
                                         : formData.columns })) }))] }), isOpen && (_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,
+                                height: '100%',
+                                minWidth: formWidth,
+                                maxWidth: formWidth,
+                                width: formWidth,
                             }),
                             ...(windowWidth < 1200 && {
-                                paddingBottom: modalPadding
-                            })
-                        }, 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(LabelComponent, { label: "Name" }), _jsx(TextInputComponent, { id: "chart-builder-name", width: 200, value: formData.name, onChange: (e) => handleChange(e.target.value, 'name'), placeholder: "Name" })] }), showDashboardDropdown && !destinationDashboard && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(LabelComponent, { label: "Dashboard" }), _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 })] })), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(LabelComponent, { label: "Chart type" }), _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 })] })] }), _jsx("br", {}), _jsxs("div", { style: {
+                                width: formWidth,
+                                paddingTop: modalPadding,
+                                paddingBottom: modalPadding,
+                            }),
+                        }, children: [_jsxs(FormContainer, { children: [_jsxs(ChartBuilderInputRowContainer, { children: [_jsx("div", { ref: inputRef, style: { display: 'flex', flexDirection: 'column' }, children: _jsx(TextInputComponent, { id: "chart-builder-name", label: "Name", width: 200, value: formData.name, onChange: (e) => handleChange(e.target.value, 'name'), placeholder: "Name" }) }), showDashboardDropdown && !destinationDashboard && (_jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: _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 }) })), _jsx("div", { ref: selectRef, style: { display: 'flex', flexDirection: 'column' }, children: _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 }) })] }), _jsxs("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
-                                            gap: 12,
-                                            marginTop: 6,
+                                            gap: 6,
                                         }, children: [_jsx(HeaderComponent, { label: "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: 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 && (_jsx("div", { ref: pivotCardContainer, children: _jsx("div", { style: {
-                                                                width: !isHorizontalView
-                                                                    ? divWidth
-                                                                    : 'calc(100% - 40px)',
-                                                            }, children: _jsx(PivotCard, { pivotTable: {
+                                                        }, 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: 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 && (_jsx("div", { children: _jsx("div", { style: { width: pivotCardWidth }, children: _jsx(PivotCard, { pivotTable: {
                                                                     pivot: formData.pivot,
                                                                     rows: selectedPivotTable?.rows,
                                                                     columns: selectedPivotTable?.columns,
@@ -856,127 +903,97 @@ export default function ChartBuilder({ TextInputComponent = 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 }) }) }))] })] }), _jsx("br", {}), (formData.pivot || formData.chartType !== 'table') && (_jsxs("div", { children: [CHART_TO_LABELS[formData.chartType]?.xAxisLabel && (_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') && (_jsxs("div", { children: [CHART_TO_LABELS[formData.chartType]?.xAxisLabel && (_jsx("div", { style: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
-                                                    gap: 6,
-                                                    marginTop: 6,
-                                                }, children: _jsx(HeaderComponent, { label: "Chart" }) })), CHART_TO_LABELS[formData.chartType]?.xAxisLabel && (_jsxs("div", { children: [_jsx(LabelComponent, { label: CHART_TO_LABELS[formData.chartType]?.xAxisLabel ?? '' }), _jsxs("div", { style: {
-                                                            display: 'flex',
-                                                            flexDirection: 'row',
-                                                            gap: 12,
-                                                        }, children: [_jsx(SelectComponent, { value: formData.xAxisField, onChange: (e) => handleChange(e.target.value, 'xAxisField'), options: formData.pivot
+                                                }, children: _jsx(HeaderComponent, { label: "Chart" }) })), CHART_TO_LABELS[formData.chartType]?.xAxisLabel && (_jsxs("div", { children: [_jsx(SubHeaderComponent, { label: CHART_TO_LABELS[formData.chartType]?.xAxisLabel ?? '' }), _jsxs(ChartBuilderInputRowContainer, { children: [_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 }), _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') }), _jsx(SelectComponent, { value: formData.pivot &&
+                                                                    })), width: 200 }), _jsx(TextInputComponent, { id: "chart-builder-x-axis-label", width: 200, value: formData.xAxisLabel, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'xAxisLabel') }), _jsx(SelectComponent, { value: formData.pivot &&
                                                                     isDateField(formData.pivot.rowFieldType)
                                                                     ? 'pivot_date'
                                                                     : formData.xAxisFormat, onChange: (e) => handleChange(e.target.value, 'xAxisFormat'), options: formData.pivot &&
                                                                     isDateField(formData.pivot.rowFieldType)
                                                                     ? [{ value: 'pivot_date', label: 'date' }]
-                                                                    : formatOptions, width: 200 })] }, 'xAxisField'), _jsx("br", {})] })), CHART_TO_LABELS[formData.chartType]?.yAxisLabel && (_jsxs("div", { children: [_jsx(LabelComponent, { label: 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(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 numberFormatOptions.includes(columns.find((col) => col.field === elem.field)?.format || '');
-                                                                        })
-                                                                            .map((elem) => ({
-                                                                            label: elem.field,
-                                                                            value: elem.field,
-                                                                        })), width: 200 }), _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) }), _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 && (_jsx("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: _jsx(DeleteButtonComponent, { onClick: () => handleRemoveField('yAxisFields', index) }) }))] }, 'yAxisField' + index))) }), formData.pivot === null && (_jsxs(_Fragment, { children: [_jsx("br", {}), _jsx(SecondaryButtonComponent, { onClick: () => handleAddField('yAxisFields'), label: "Add field +" })] }))] })), _jsx("br", {})] })), showTableFormatOptions && (_jsxs("div", { children: [_jsxs("div", { style: {
+                                                                    : formatOptions, width: 200 })] })] })), CHART_TO_LABELS[formData.chartType]?.yAxisLabel && (_jsxs("div", { children: [_jsx(SubHeaderComponent, { label: CHART_TO_LABELS[formData.chartType]?.yAxisLabel ?? '' }), _jsxs(ChartBuilderInputColumnContainer, { children: [formData.yAxisFields.map((yAxisField, index) => (_jsxs(ChartBuilderInputRowContainer, { children: [_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 numberFormatOptions.includes(columns.find((col) => col.field === elem.field)?.format || '');
+                                                                            })
+                                                                                .map((elem) => ({
+                                                                                label: elem.field,
+                                                                                value: elem.field,
+                                                                            })), width: 200 }), _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) }), _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 && (_jsx("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: _jsx(DeleteButtonComponent, { onClick: () => handleRemoveField('yAxisFields', index) }) }))] }, 'yAxisField' + index))), formData.pivot === null && (_jsx("div", { children: _jsx(SecondaryButtonComponent, { onClick: () => handleAddField('yAxisFields'), label: "Add field +" }) }))] })] }))] })), showTableFormatOptions && (_jsxs("div", { children: [_jsxs("div", { style: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
-                                                    gap: 6,
-                                                    marginTop: 6,
-                                                }, children: [_jsx(HeaderComponent, { label: "Table" }), _jsx(LabelComponent, { label: "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(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 }), _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) }), _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 &&
-                                                                            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
-                                                                        ? isDateField(formData.pivot.rowFieldType)
-                                                                            ? [{ label: 'date', value: 'pivot_date' }]
-                                                                            : [{ label: 'string', value: 'string' }]
-                                                                        : [...NUMBER_OPTIONS], width: 200 })] }, 'column' + index)))
-                                                    : formData.columns.map((column, index) => (_jsxs("div", { style: {
-                                                            display: 'flex',
-                                                            flexDirection: 'row',
-                                                            gap: 12,
-                                                        }, children: [_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 }), _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) }), _jsx(SelectComponent, { value: column.format, onChange: (e) => handleChange(e.target.value, 'columns.format', index), options: formatOptions, width: 200 }), _jsx("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: _jsx(DeleteButtonComponent, { onClick: () => handleRemoveField('columns', index) }) })] }, 'column' + index))) }), _jsx("br", {}), _jsx(SecondaryButtonComponent, { onClick: () => handleAddField('columns'), label: "Add column +" }), _jsx("br", {}), _jsx("br", {})] })), showDateFieldOptions && formData.dateField && (_jsxs("div", { style: {
+                                                }, children: [_jsx(HeaderComponent, { label: "Table" }), _jsx(SubHeaderComponent, { label: "Columns" })] }), _jsxs(ChartBuilderInputColumnContainer, { children: [formData.pivot &&
+                                                        selectedPivotTable &&
+                                                        selectedPivotTable.columns &&
+                                                        formData.chartType === 'table'
+                                                        ? // THIS CASE IF FOR PIVOT TABLES ONLY
+                                                            selectedPivotTable.columns.map((column, index) => (_jsxs(ChartBuilderInputRowContainer, { children: [_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 }), _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) }), _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 &&
+                                                                                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
+                                                                            ? isDateField(formData.pivot.rowFieldType)
+                                                                                ? [{ label: 'date', value: 'pivot_date' }]
+                                                                                : [{ label: 'string', value: 'string' }]
+                                                                            : [...NUMBER_OPTIONS], width: 200 })] }, 'column' + index)))
+                                                        : formData.columns.map((column, index) => (_jsxs(ChartBuilderInputRowContainer, { children: [_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 }), _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) }), _jsx(SelectComponent, { value: column.format, onChange: (e) => handleChange(e.target.value, 'columns.format', index), options: formatOptions, width: 200 }), _jsx("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: _jsx(DeleteButtonComponent, { onClick: () => handleRemoveField('columns', index) }) })] }, 'column' + index))), _jsx("div", { children: !(
+                                                        // hide when pivoted and chartType === 'table'
+                                                        (formData.pivot &&
+                                                            selectedPivotTable &&
+                                                            selectedPivotTable.columns &&
+                                                            formData.chartType === 'table')) && (_jsx(SecondaryButtonComponent, { onClick: () => handleAddField('columns'), label: "Add column +" })) })] })] })), showDateFieldOptions && formData.dateField && (_jsxs("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 6,
-                                            marginTop: 6,
-                                        }, children: [_jsx(HeaderComponent, { label: "Date field" }), _jsxs("div", { style: {
-                                                    display: 'flex',
-                                                    flexDirection: 'row',
-                                                    gap: 12,
-                                                }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(LabelComponent, { label: "Table" }), _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 })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(LabelComponent, { label: "Field" }), _jsx(SelectComponent, { value: 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 })] })] }), _jsx("br", {})] })), showAccessControlOptions && (_jsxs("div", { style: {
+                                        }, children: [_jsx(HeaderComponent, { label: "Date field" }), _jsxs(ChartBuilderInputRowContainer, { children: [_jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: _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 }) }), _jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: _jsx(SelectComponent, { label: "Field", value: 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 && (_jsxs("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 12,
-                                            marginTop: 6,
-                                        }, children: [_jsx(HeaderComponent, { label: "Organization access" }), _jsx(SegmentedControl, { onChange: (e) => handleChange(e, 'template'), value: formData.template, theme: theme, organizationName: organizationName })] }))] }), _jsxs("div", { style: {
+                                        }, children: [_jsx(HeaderComponent, { label: "Organization access" }), _jsx(SegmentedControl, { onChange: (e) => handleChange(e, 'template'), value: formData.template || !organizationName, theme: theme, organizationName: organizationName })] }))] }), _jsxs("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'row',
                                     justifyContent: 'flex-end',
@@ -1060,7 +1077,7 @@ export function DashboardFilterModal({ isOpen, setIsOpen, issues, ModalComponent
                 padding: '20px',
                 boxSizing: 'border-box',
                 overflow: 'scroll',
-            }, children: [issues.map((issue, index) => (_jsx("span", { style: { paddingTop: '10px' }, children: issue }, issue))), _jsx("br", {}), _jsx("div", { style: {
+            }, children: [issues.map((issue, index) => (_jsx("span", { style: { paddingTop: '10px' }, children: issue }, issue))), _jsx("div", { style: {
                         display: 'flex',
                         flexDirection: 'row',
                         gap: '12px',