@quillsql/react 2.10.36 → 2.10.38

package/dist/esm/ChartBuilder.js

@@ -1,28 +1,17 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-nocheck
-import { useEffect, useRef, useState, useContext, useMemo } from 'react';
+import { useEffect, useRef, useState, useContext, useMemo, } from 'react';
 import { ClientContext, DashboardContext, DashboardFiltersContext, SchemaContext, ThemeContext, } from './Context';
 import { getData, getDataFromCloud } from './utils/dataFetcher';
 import { getPostgresBasicType } from './ReportBuilder';
 import { PivotModal, generatePivotTable, isDateField, } from './internals/ReportBuilder/PivotModal';
 import { PivotCard } from './internals/ReportBuilder/PivotList';
 import Chart from './Chart';
-import { MemoizedModal, MemoizedTextInput, MemoizedSelect, MemoizedButton, MemoizedSecondaryButton, MemoizedHeader, MemoizedLabel, MemoizedDeleteButton, MemoizedText, MemoizedPopover, } from './components/UiComponents';
+import { MemoizedModal, QuillTextInput, MemoizedButton, MemoizedSecondaryButton, MemoizedHeader, MemoizedLabel, MemoizedDeleteButton, MemoizedText, MemoizedPopover, } from './components/UiComponents';
 import Banner from './components/Banner';
 import { mergeComparisonRange } from './utils/merge';
+import { QuillSelectComponent } from './components/QuillSelect';
+import { removeDoubleQuotes, snakeCaseToTitleCase, } from './utils/textProcessing';
 const CHART_TYPES = ['column', 'line', 'table', 'metric', 'bar', 'pie'];
-export function snakeCaseToTitleCase(str) {
-    if (!str) {
-        return str;
-    }
-    return str
-        .toString()
-        .split(/_| /)
-        .map((word) => word === 'id'
-        ? 'ID'
-        : word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
-        .join(' ');
-}
 const POSTGRES_DATE_TYPES = [
     'timestamp',
     'date',
@@ -30,6 +19,14 @@ const POSTGRES_DATE_TYPES = [
     'time',
     'timetz',
 ];
+const CHART_TO_LABELS = {
+    column: { xAxisLabel: 'X-Axis', yAxisLabel: 'Y-Axis' },
+    line: { xAxisLabel: 'X-Axis', yAxisLabel: 'Y-Axis' },
+    table: {},
+    metric: { xAxisLabel: 'Value' },
+    bar: { xAxisLabel: 'X-Axis', yAxisLabel: 'Y-Axis' },
+    pie: { xAxisLabel: 'Category', yAxisLabel: 'Count' },
+};
 function getTablesHelper(ast, allTables) {
     const tables = [];
     const withAliases = [];
@@ -72,11 +69,6 @@ async function getReferencedTables(client, sqlQuery, dbTables) {
     const resp = await getDataFromCloud(client, `astify`, { query: sqlQuery });
     return getTablesHelper(resp.ast.length ? resp.ast[0] : resp.ast, dbTables);
 }
-const AGGREGATION_TYPES = [
-    { label: 'sum', value: 'sum' },
-    { label: 'count', value: 'count' },
-    { label: 'average', value: 'avg' },
-];
 export const numberFormatOptions = [
     'whole_number',
     'one_decimal_place',
@@ -84,20 +76,30 @@ export const numberFormatOptions = [
     'dollar_amount',
     'dollar_cents',
 ];
-const NUMBER_FORMAT_OPTIONS = [
+export const dateFormatOptions = [
+    'MMM_yyyy',
+    'MMM_dd',
+    'MMM_dd_yyyy',
+    'MMM_dd_hh:mm_ap_pm',
+    'hh_ap_pm',
+];
+const NUMBER_OPTIONS = [
     { value: 'whole_number', label: 'whole number' },
     { value: 'one_decimal_place', label: 'one decimal place' },
     { value: 'two_decimal_places', label: 'two decimal places' },
     { value: 'dollar_amount', label: 'dollar amount' },
     { value: 'dollar_cents', label: 'dollar and cent amount' },
 ];
-const formatOptions = [
-    ...NUMBER_FORMAT_OPTIONS,
+const DATE_OPTIONS = [
     { value: 'MMM_yyyy', label: 'month' },
-    { value: 'MMM_dd-MMM_dd', label: 'week' },
-    { value: 'MMM_dd_yyyy', label: 'day' },
+    { value: 'MMM_dd', label: 'day' },
+    { value: 'MMM_dd_yyyy', label: 'day and year' },
     { value: 'MMM_dd_hh:mm_ap_pm', label: 'day and time' },
     { value: 'hh_ap_pm', label: 'hour' },
+];
+const formatOptions = [
+    ...NUMBER_OPTIONS,
+    ...DATE_OPTIONS,
     { value: 'percent', label: 'percent' },
     { value: 'string', label: 'string' },
 ];
@@ -105,7 +107,7 @@ export default function ChartBuilder(props) {
     const [theme] = useContext(ThemeContext);
     return (_jsx(_Fragment, { children: props.Modal ? (_jsx(props.Modal, { isOpen: props.isOpen, setIsOpen: props.setIsOpen, title: props.title || 'Add to dashboard', onClose: () => props.setIsOpen(false), theme: theme, children: _jsx(ChartBuilderForm, { ...props }) })) : (_jsx(MemoizedModal, { setIsOpen: props.setIsOpen, isOpen: props.isOpen, onClose: () => props.setIsOpen(false), title: props.title || 'Add to dashboard', theme: theme, children: _jsx(ChartBuilderForm, { ...props }) })) }));
 }
-function ChartBuilderForm({ TextInput = MemoizedTextInput, Select = MemoizedSelect, Button = MemoizedButton, SecondaryButton = MemoizedSecondaryButton, Header = MemoizedHeader, Label = MemoizedLabel, DeleteButton = MemoizedDeleteButton, Text = MemoizedText, Modal = MemoizedModal, Popover = MemoizedPopover, isOpen, isEditMode, pivot, setIsOpen, rows, columns, query, queryNoDateColumn, dateRange: dr, formHeaderStyle, formLabelStyle, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, showDashboardDropdown = true, onAddToDashboardComplete, onDelete, fields: fieldsProp, dashboardItem = undefined, recommendedPivots: rp = [], createdPivots: cp = [], destinationDashboard, dateColumn, buttonLabel, organizationName, }) {
+function ChartBuilderForm({ TextInput = QuillTextInput, Select = QuillSelectComponent, Button = MemoizedButton, SecondaryButton = MemoizedSecondaryButton, Header = MemoizedHeader, Label = MemoizedLabel, DeleteButton = MemoizedDeleteButton, Text = MemoizedText, Popover = MemoizedPopover, isOpen, isEditMode, pivot, setIsOpen, rows, columns, query, queryNoDateColumn, dateRange: dr, formHeaderStyle, formLabelStyle, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, showDashboardDropdown = true, onAddToDashboardComplete, onDelete, fields: fieldsProp, dashboardItem = undefined, recommendedPivots: rp = [], createdPivots: cp = [], destinationDashboard, dateColumn, buttonLabel, organizationName, }) {
     const dateRange = dr || [null, null, null];
     const [client] = useContext(ClientContext);
     const [theme] = useContext(ThemeContext);
@@ -119,13 +121,13 @@ function ChartBuilderForm({ TextInput = MemoizedTextInput, Select = MemoizedSele
         format: field.format,
         label: field.name,
     })) || [];
-    const parentRef = useRef();
-    const deleteRef = useRef();
+    const parentRef = useRef(null);
+    const deleteRef = useRef(null);
     const modalPadding = 20;
     const deleteButtonMargin = -13;
     useEffect(() => {
         const calculateWidth = () => {
-            return (parentRef.current.offsetWidth -
+            return ((parentRef.current?.offsetWidth || 0) -
                 (deleteRef?.current
                     ? deleteRef?.current.offsetWidth - deleteButtonMargin
                     : 0));
@@ -195,6 +197,7 @@ function ChartBuilderForm({ TextInput = MemoizedTextInput, Select = MemoizedSele
             dashboardOptions &&
             dashboardOptions.length) {
             setDefaultDashboardName(dashboardOptions[0]?.label);
+            setFormData({ ...formData, dashboardName: dashboardOptions[0]?.label });
         }
     }, [dashboardOptions]);
     useEffect(() => {
@@ -210,7 +213,7 @@ function ChartBuilderForm({ TextInput = MemoizedTextInput, Select = MemoizedSele
     const [showPivotPopover, setShowPivotPopover] = useState(false);
     const [isEdittingPivot, setIsEdittingPivot] = useState(false);
     const [selectedPivotIndex, setSelectedPivotIndex] = useState(-1);
-    const [tableName, setTableName] = useState(null);
+    const [tableName, setTableName] = useState(undefined);
     const selectedTable = schema?.find((t) => t.displayName === tableName);
     const [pivotPopUpTitle, setPivotPopUpTitle] = useState('Add Pivot');
     const [createdPivots, setCreatedPivots] = useState(pivot ? [pivot] : dashboardItem?.pivot ? [dashboardItem.pivot] : cp);
@@ -234,9 +237,11 @@ function ChartBuilderForm({ TextInput = MemoizedTextInput, Select = MemoizedSele
                 setFormData({
                     ...formData,
                     dateField: {
-                        table: result[0]?.name,
+                        table: result[0]?.name || '',
                         field: result[0]?.columns?.find((elem) => elem.name === dateColumn)
-                            ?.name || result[0]?.columns[0]?.name,
+                            ?.name ||
+                            result[0]?.columns[0]?.name ||
+                            '',
                     },
                 });
             }
@@ -278,7 +283,7 @@ function ChartBuilderForm({ TextInput = MemoizedTextInput, Select = MemoizedSele
             : false;
         return {
             pivot,
-            chartType: 'column',
+            chartType: dashboardItem?.chartType || 'column',
             xAxisField: pivot.rowField,
             xAxisFormat: isDateField(pivot.rowFieldType)
                 ? 'string'
@@ -298,74 +303,100 @@ function ChartBuilderForm({ TextInput = MemoizedTextInput, Select = MemoizedSele
         };
     };
     const [formData, setFormData] = useState(pivot
-        ? { ...formEmptyState, ...pivotFormData(pivot) }
+        ? { ...formEmptyState, ...dashboardItem, ...pivotFormData(pivot) }
         : dashboardItem || formEmptyState);
     const selectedPivotTable = useMemo(() => {
         if (formData.pivot && rows) {
-            return generatePivotTable(formData.pivot, rows, dateRange);
+            return generatePivotTable(formData.pivot, rows, dateRange, false);
         }
         else {
-            return {};
+            return undefined;
         }
-    }, [formData.pivot, rows]);
+    }, [formData.pivot, rows, formData]);
     const handleChange = (value, fieldName, index) => {
-        if (index !== undefined) {
-            // For dynamic array fields
-            const [field, subfield] = fieldName.split('.');
-            const updatedArray = formData[field].map((item, i) => i === index ? { ...item, [subfield]: value } : item);
-            setFormData({ ...formData, [field]: updatedArray });
-        }
-        else if (fieldName.includes('.')) {
-            // For nested fields
-            const [field, subfield] = fieldName.split('.');
-            if (field === 'pivot' && subfield !== '') {
-                const subfieldTypeFieldName = subfield + 'Type';
-                if (value.length) {
-                    const subfieldType = fields.find((field) => field.field === value).type;
-                    setFormData({
-                        ...formData,
-                        [field]: {
-                            ...formData[field],
-                            [subfield]: value,
-                            [subfieldTypeFieldName]: subfieldType,
-                        },
-                    });
+        try {
+            // WE NEED TO REPROCESS THE PIVOT TABLE IF THE PIVOT COLUMN CHANGES
+            // WE NEED TO UPDATE BOTH VALUEFIELDTYPE AND COLUMN FIELD TYPES
+            if (fieldName === 'pivotColumn') {
+                // CAN'T EDIT THE TYPE OF THE RowField
+                if (index === 0) {
                     return;
                 }
-                else {
+                const updatedPivot = {
+                    ...formData.pivot,
+                    valueFieldType: value,
+                };
+                // @ts-ignore
+                setFormData({ ...formData, pivot: updatedPivot });
+                return;
+            }
+            if (index !== undefined) {
+                // For dynamic array fields
+                const [field, subfield] = fieldName.split('.');
+                // @ts-ignore
+                const updatedArray = formData[field].map((item, i) => i === index ? { ...item, [subfield]: value } : item);
+                setFormData({ ...formData, [field]: updatedArray });
+            }
+            else if (fieldName.includes('.')) {
+                // For nested fields
+                const [field, subfield] = fieldName.split('.');
+                if (field === 'pivot' && subfield !== '') {
+                    const subfieldTypeFieldName = subfield + 'Type';
+                    if (value.length) {
+                        const subfieldType = fields.find((field) => field.field === value).type;
+                        setFormData({
+                            ...formData,
+                            // @ts-ignore
+                            [field]: {
+                                ...formData[field],
+                                [subfield]: value,
+                                [subfieldTypeFieldName]: subfieldType,
+                            },
+                        });
+                        return;
+                    }
+                    else {
+                        setFormData({
+                            ...formData,
+                            // @ts-ignore
+                            [field]: {
+                                ...formData[field],
+                                [subfield]: '',
+                                [subfieldTypeFieldName]: '',
+                            },
+                        });
+                        return;
+                    }
+                }
+                if (field === 'dateField' &&
+                    subfield === 'table' &&
+                    !formData.dateField.field) {
+                    const field = schema?.find((elem) => elem.name === value)
+                        ?.columns?.[0]?.name;
                     setFormData({
                         ...formData,
-                        [field]: {
-                            ...formData[field],
-                            [subfield]: '',
-                            [subfieldTypeFieldName]: '',
-                        },
+                        // @ts-ignore
+                        dateField: { ...formData[field], [subfield]: value, field: field },
                     });
                     return;
                 }
-            }
-            if (field === 'dateField' &&
-                subfield === 'table' &&
-                !formData.dateField.field) {
-                const field = schema?.find((elem) => elem.name === value)?.columns?.[0]
-                    ?.name;
                 setFormData({
                     ...formData,
-                    dateField: { ...formData[field], [subfield]: value, field: field },
+                    // @ts-ignore
+                    [field]: { ...formData[field], [subfield]: value },
                 });
-                return;
             }
-            setFormData({
-                ...formData,
-                [field]: { ...formData[field], [subfield]: value },
-            });
+            else {
+                // For simple fields
+                setFormData({ ...formData, [fieldName]: value });
+            }
         }
-        else {
-            // For simple fields
+        catch (e) {
+            console.log('No field or subfield found');
             setFormData({ ...formData, [fieldName]: value });
         }
     };
-    const handleAddPivot = (pivot, index) => {
+    const handleAddPivot = (pivot) => {
         setFormData((formData) => ({
             ...formData,
             ...pivotFormData(pivot),
@@ -381,6 +412,7 @@ function ChartBuilderForm({ TextInput = MemoizedTextInput, Select = MemoizedSele
         if (fieldName === 'columns') {
             setFormData({
                 ...formData,
+                // @ts-ignore
                 columns: [...formData.columns, { label: '', field: '', format: '' }],
             });
         }
@@ -389,6 +421,7 @@ function ChartBuilderForm({ TextInput = MemoizedTextInput, Select = MemoizedSele
                 ...formData,
                 yAxisFields: [
                     ...formData.yAxisFields,
+                    // @ts-ignore
                     { label: '', field: '', chartType: '', format: '' },
                 ],
             });
@@ -397,6 +430,7 @@ function ChartBuilderForm({ TextInput = MemoizedTextInput, Select = MemoizedSele
             setFormData({
                 ...formData,
                 pivot: {
+                    title: '',
                     rowField: '',
                     rowFieldType: '',
                     columnField: '',
@@ -415,11 +449,12 @@ function ChartBuilderForm({ TextInput = MemoizedTextInput, Select = MemoizedSele
             });
             return;
         }
+        // @ts-ignore
         const updatedArray = formData[fieldName].filter((_, i) => i !== index);
         setFormData({ ...formData, [fieldName]: updatedArray });
     };
-    const handleSubmit = (e) => {
-        e.preventDefault();
+    const handleSubmit = (event) => {
+        event.preventDefault();
     };
     const deleteChart = async () => {
         if (!dashboardItem._id || !client) {
@@ -444,7 +479,7 @@ function ChartBuilderForm({ TextInput = MemoizedTextInput, Select = MemoizedSele
         setIsOpen(false);
         setIsSubmitting(false);
     };
-    const editChart = async (_e) => {
+    const editChart = async () => {
         if (isSubmitting) {
             return;
         }
@@ -466,8 +501,11 @@ function ChartBuilderForm({ TextInput = MemoizedTextInput, Select = MemoizedSele
             queryString: queryNoDateColumn || query,
             pivot: formData.pivot,
         };
+        // @ts-ignore
         if (cloudBody['rows']) {
+            // @ts-ignore
             delete cloudBody['rows'];
+            // @ts-ignore
             delete cloudBody['compareRows'];
         }
         // add orgId: customerId if present for hostedBody
@@ -498,7 +536,7 @@ function ChartBuilderForm({ TextInput = MemoizedTextInput, Select = MemoizedSele
                 data: {
                     ...resp,
                     rows,
-                    fields,
+                    fieldOptions,
                     filtersApplied: dashboardFilters,
                 },
             });
@@ -527,16 +565,16 @@ function ChartBuilderForm({ TextInput = MemoizedTextInput, Select = MemoizedSele
                         } }), _jsxs("style", { children: [" ", `#quill-modal-header { padding-top: 41px; }`, " "] })] })), _jsx("div", { children: _jsx(Chart, { config: { ...formData, rows }, colors: theme.chartColors, containerStyle: {
                         width: formData.chartType === 'table' ? 640 : 'calc(100% - 24px)',
                         height: 300,
-                    } }) }), _jsx("div", { style: { height: 20 } }), _jsxs("form", { ref: parentRef, id: "quill-chart-form", onSubmit: handleSubmit, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { children: "Name" }), _jsx(TextInput, { value: formData.name, onChange: (e) => handleChange(e, 'name'), placeholder: "Name" })] }), showDashboardDropdown && !destinationDashboard && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { children: "Dashboard" }), _jsx(Select, { label: 'Dashboard', value: formData.dashboardName, onChange: (e) => handleChange(e, 'dashboardName'), options: dashboardOptions.map((elem) => ({
+                    } }) }), _jsx("div", { style: { height: 20 } }), _jsxs("form", { ref: parentRef, id: "quill-chart-form", onSubmit: handleSubmit, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { children: "Name" }), _jsx(TextInput, { id: "chart-builder-name", value: formData.name, onChange: (e) => handleChange(e, 'name'), placeholder: "Name", theme: theme })] }), showDashboardDropdown && !destinationDashboard && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { children: "Dashboard" }), _jsx(Select, { value: formData.dashboardName || '', onChange: (e) => handleChange(e, 'dashboardName'), options: dashboardOptions.map((elem) => ({
                                             label: elem.label,
                                             value: elem.label,
-                                        })) })] })), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { children: "Chart type" }), _jsx(Select, { label: 'Chart Type', value: formData.chartType, onChange: (e) => handleChange(e, 'chartType'), 
+                                        })), theme: theme })] })), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { children: "Chart type" }), _jsx(Select, { value: formData.chartType, onChange: (e) => handleChange(e, 'chartType'), 
                                         // filter out metric for all pivots
                                         // filter out bar and pie for row and column pivot
                                         options: CHART_TYPES.filter((elem) => !((formData.pivot && elem === 'metric') ||
                                             (formData.pivot &&
                                                 formData.pivot.columnField &&
-                                                (elem === 'bar' || elem === 'pie')))).map((elem) => ({ label: elem, value: elem })) })] })] }), _jsx("br", {}), _jsxs("div", { style: {
+                                                (elem === 'bar' || elem === 'pie')))).map((elem) => ({ label: elem, value: elem })), theme: theme })] })] }), _jsx("br", {}), _jsxs("div", { style: {
                             display: 'flex',
                             flexDirection: 'column',
                             gap: 12,
@@ -562,43 +600,92 @@ function ChartBuilderForm({ TextInput = MemoizedTextInput, Select = MemoizedSele
                                                     setPivotValueField(formData.pivot?.valueField);
                                                     setPivotAggregation(formData.pivot?.aggregationType);
                                                     setPivotPopUpTitle('Edit Pivot');
-                                                }, selectedPivotIndex: -1, onEditPivot: () => { }, ButtonComponent: Button, HeaderComponent: Header, showEdit: false, onClose: handleDeletePivot, minHeight: 180, LabelComponent: Label, TextComponent: Text }) }) }))] })] }), _jsx("br", {}), (formData.pivot || formData.chartType !== 'table') && (_jsxs("div", { children: [_jsxs("div", { style: {
+                                                }, selectedPivotIndex: -1, onEditPivot: () => { }, ButtonComponent: Button, HeaderComponent: Header, showEdit: false, onClose: handleDeletePivot, minHeight: 180, LabelComponent: Label, TextComponent: Text }) }) }))] })] }), _jsx("br", {}), (formData.pivot || formData.chartType !== 'table') && (_jsxs("div", { children: [CHART_TO_LABELS[formData.chartType]?.xAxisLabel && (_jsx("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'column',
                                     gap: 6,
                                     marginTop: 6,
-                                }, children: [_jsx(Header, { children: "Chart" }), _jsx(Label, { children: "X-axis" })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, children: [_jsx(Select, { label: 'X-axis Field', value: formData.xAxisField, onChange: (e) => handleChange(e, 'xAxisField'), disabled: formData.pivot !== null, options: fieldOptions.map((elem) => ({
-                                            label: formData.pivot
-                                                ? `pivot row (${elem.field})`
-                                                : elem.field,
-                                            value: elem.field,
-                                        })) }), _jsx(TextInput, { value: formData.xAxisLabel, placeholder: "Column Label", onChange: (e) => handleChange(e, 'xAxisLabel') }), _jsx(Select, { label: 'X-axis Format', value: formData.xAxisFormat, onChange: (e) => handleChange(e, 'xAxisFormat'), options: formatOptions })] }, 'xAxisField0'), _jsx("br", {}), _jsx(Label, { children: "Y-axis" }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: formData.yAxisFields.map((yAxisField, index) => (_jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, children: [_jsx(Select, { label: 'Y-axis Field', value: yAxisField.field, onChange: (e) => handleChange(e, 'yAxisFields.field', index), disabled: formData.pivot !== null, options: [
-                                                { label: 'Select', value: '' },
-                                                ...fieldOptions
-                                                    .filter((elem) => {
-                                                    return (formData.chartType === 'table' ||
-                                                        formData.pivot ||
-                                                        numberFormatOptions.includes(columns.find((col) => col.field === elem.field)
-                                                            ?.format));
-                                                })
-                                                    .map((elem) => ({
-                                                    label: formData.pivot
-                                                        ? `pivot columns (${formData.pivot.valueField})`
-                                                        : elem.field,
-                                                    value: elem.field,
-                                                })),
-                                            ] }), _jsx(TextInput, { value: yAxisField.label, placeholder: "Column Label", onChange: (e) => handleChange(e, 'yAxisFields.label', index) }), _jsx(Select, { label: 'Y-axis Format', value: yAxisField.format, onChange: (e) => handleChange(e, 'yAxisFields.format', index), options: [{ label: 'Select', value: '' }, ...formatOptions] }), formData.pivot === null && (_jsx("div", { ref: deleteRef, children: _jsx(DeleteButton, { style: { marginLeft: deleteButtonMargin }, onClick: () => handleRemoveField('yAxisFields', index) }) }))] }, 'yAxisField' + index))) }), formData.pivot === null && (_jsxs(_Fragment, { children: [_jsx("br", {}), _jsx(SecondaryButton, { onClick: () => handleAddField('yAxisFields'), label: "Add field +" })] })), _jsx("br", {}), _jsx("br", {})] })), (showTableFormatOptions || formData.chartType === 'table') && (_jsxs("div", { children: [_jsxs("div", { style: {
+                                }, children: _jsx(Header, { children: "Chart" }) })), CHART_TO_LABELS[formData.chartType]?.xAxisLabel && (_jsxs("div", { children: [_jsx(Label, { children: CHART_TO_LABELS[formData.chartType]?.xAxisLabel }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, children: [_jsx(Select, { value: formData.xAxisField, onChange: (e) => handleChange(e, 'xAxisField'), options: formData.pivot
+                                                    ? [
+                                                        {
+                                                            label: `Pivot Row (${formData.pivot.rowField})`,
+                                                            value: formData.pivot.rowField,
+                                                        },
+                                                    ]
+                                                    : fieldOptions.map((elem) => ({
+                                                        label: elem.field,
+                                                        value: elem.field,
+                                                    })), theme: theme }), _jsx(TextInput, { id: "chart-builder-x-axis-label", value: formData.pivot
+                                                    ? formData.pivot.rowField
+                                                    : formData.xAxisLabel, placeholder: "Column Label", onChange: (e) => handleChange(e, 'xAxisLabel'), theme: theme }), _jsx(Select, { value: formData.pivot && isDateField(formData.pivot.rowFieldType)
+                                                    ? 'pivot_date'
+                                                    : formData.xAxisFormat, onChange: (e) => handleChange(e, 'xAxisFormat'), options: formData.pivot && isDateField(formData.pivot.rowFieldType)
+                                                    ? [{ value: 'pivot_date', label: 'date' }]
+                                                    : formatOptions, theme: theme })] }, 'xAxisField'), _jsx("br", {})] })), CHART_TO_LABELS[formData.chartType]?.yAxisLabel && (_jsxs("div", { children: [_jsx(Label, { children: CHART_TO_LABELS[formData.chartType]?.yAxisLabel }), _jsx("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            gap: 10,
+                                        }, children: formData.yAxisFields.map((yAxisField, index) => (_jsxs("div", { style: {
+                                                display: 'flex',
+                                                flexDirection: 'row',
+                                                gap: 12,
+                                            }, children: [_jsx(Select, { value: formData.pivot
+                                                        ? formData.pivot.valueField
+                                                        : yAxisField.field, onChange: (e) => handleChange(e, 'yAxisFields.field', index), theme: theme, options: formData.pivot
+                                                        ? [
+                                                            {
+                                                                label: `Pivot Column (${formData.pivot.valueField})`,
+                                                                value: formData.pivot.valueField,
+                                                            },
+                                                        ]
+                                                        : fieldOptions
+                                                            .filter((elem) => {
+                                                            return numberFormatOptions.includes(columns.find((col) => col.field === elem.field)?.format || '');
+                                                        })
+                                                            .map((elem) => ({
+                                                            label: elem.field,
+                                                            value: elem.field,
+                                                        })) }), _jsx(TextInput, { id: "chart-builder-y-axis-label", value: formData.pivot?.valueField || yAxisField.label, placeholder: "Column Label", onChange: (e) => handleChange(e, 'yAxisFields.label', index), theme: theme }), _jsx(Select, { theme: theme, value: formData.pivot
+                                                        ? !!NUMBER_OPTIONS.find((option) => {
+                                                            return option.value === yAxisField.format;
+                                                        })
+                                                            ? // @ts-ignore
+                                                                NUMBER_OPTIONS.find((option) => option.value === yAxisField.format).value
+                                                            : 'whole_number'
+                                                        : yAxisField.format, onChange: (e) => handleChange(e, 'yAxisFields.format', index), options: formData.pivot ? NUMBER_OPTIONS : formatOptions }), formData.pivot === null && (_jsx("div", { ref: deleteRef, children: _jsx(DeleteButton, { style: { marginLeft: deleteButtonMargin }, onClick: () => handleRemoveField('yAxisFields', index) }) }))] }, 'yAxisField' + index))) }), formData.pivot === null && (_jsxs(_Fragment, { children: [_jsx("br", {}), _jsx(SecondaryButton, { onClick: () => handleAddField('yAxisFields'), label: "Add field +" })] }))] })), _jsx("br", {})] })), (showTableFormatOptions || formData.chartType === 'table') && (_jsxs("div", { children: [_jsxs("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'column',
                                     gap: 6,
                                     marginTop: 6,
-                                }, children: [_jsx(Header, { children: "Table" }), _jsx(Label, { children: "Columns" })] }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: formData.columns.map((column, index) => (_jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, children: [_jsx(Select, { label: 'Column Field', value: column.field, onChange: (e) => handleChange(e, 'columns.field', index), options: [
-                                                { label: 'Select', value: '' },
-                                                ...fields.map((elem) => ({
+                                }, children: [_jsx(Header, { children: "Table" }), _jsx(Label, { children: "Columns" })] }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: formData.pivot &&
+                                    selectedPivotTable &&
+                                    selectedPivotTable.columns &&
+                                    formData.chartType === 'table'
+                                    ? // THIS CASE IF FOR PIVOT TABLES ONLY
+                                        selectedPivotTable.columns.map((column, index) => (_jsxs("div", { style: {
+                                                display: 'flex',
+                                                flexDirection: 'row',
+                                                gap: 12,
+                                            }, children: [_jsx(Select, { theme: theme, value: column.label, onChange: (e) => handleChange(e, 'columns.field', index), options: selectedPivotTable.columns.map((elem) => ({
+                                                        label: elem.label,
+                                                        value: elem.label,
+                                                    })) }), _jsx(TextInput, { id: `chart-builder-column-label-${index}`, value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e, 'columns.label', index), theme: theme }), _jsx(Select, { theme: theme, value: 
+                                                    // The first index use rowField for the rest of them use value fields
+                                                    formData.pivot &&
+                                                        column.field === formData.pivot.rowField
+                                                        ? formData.pivot &&
+                                                            isDateField(formData.pivot.rowFieldType)
+                                                            ? 'pivot_date'
+                                                            : 'string'
+                                                        : formData.pivot?.valueFieldType || 'whole_number', onChange: (e) => handleChange(e, 'pivotColumn', index), options: formData.pivot && index === 0
+                                                        ? isDateField(formData.pivot.rowFieldType)
+                                                            ? [{ label: 'date', value: 'pivot_date' }]
+                                                            : [{ label: 'string', value: 'string' }]
+                                                        : [...NUMBER_OPTIONS] })] }, 'column' + index)))
+                                    : formData.columns.map((column, index) => (_jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, children: [_jsx(Select, { theme: theme, value: column.field, onChange: (e) => handleChange(e, 'columns.field', index), options: fields.map((elem) => ({
                                                     label: elem.field,
                                                     value: elem.field,
-                                                })),
-                                            ] }), _jsx(TextInput, { name: "label", value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e, 'columns.label', index) }), _jsx(Select, { label: 'Column Format', value: column.format, onChange: (e) => handleChange(e, 'columns.format', index), options: [{ label: 'Select', value: '' }, ...formatOptions] }), _jsx("div", { ref: deleteRef, children: _jsx(DeleteButton, { style: { marginLeft: deleteButtonMargin }, onClick: () => handleRemoveField('columns', index) }) })] }, 'column' + index))) }), _jsx("br", {}), _jsx(SecondaryButton, { onClick: () => handleAddField('columns'), label: "Add column +" }), _jsx("br", {}), _jsx("br", {})] })), showDateFieldOptions && (_jsxs("div", { style: {
+                                                })) }), _jsx(TextInput, { id: `chart-builder-column-label-${index}`, value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e, 'columns.label', index), theme: theme }), _jsx(Select, { theme: theme, value: column.format, onChange: (e) => handleChange(e, 'columns.format', index), options: formatOptions }), _jsx("div", { ref: deleteRef, children: _jsx(DeleteButton, { style: { marginLeft: deleteButtonMargin }, onClick: () => handleRemoveField('columns', index) }) })] }, 'column' + index))) }), _jsx("br", {}), _jsx(SecondaryButton, { onClick: () => handleAddField('columns'), label: "Add column +" }), _jsx("br", {}), _jsx("br", {})] })), showDateFieldOptions && (_jsxs("div", { style: {
                             display: 'flex',
                             flexDirection: 'column',
                             gap: 6,
@@ -608,16 +695,10 @@ function ChartBuilderForm({ TextInput = MemoizedTextInput, Select = MemoizedSele
                                     flexDirection: 'row',
                                     gap: 12,
                                     // lmao part 2
-                                }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { children: "Table" }), _jsx(Select, { label: 'Date Table', value: formData.dateField.table, onChange: (e) => handleChange(e, 'dateField.table'), options: [
-                                                    {
-                                                        label: 'Select',
-                                                        value: '',
-                                                    },
-                                                    ...dateFieldOptions.map((elem) => ({
-                                                        label: elem.name,
-                                                        value: elem.name,
-                                                    })),
-                                                ] })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { children: "Field" }), _jsx(Select, { label: 'Date Field', value: formData.dateField.field, onChange: (e) => handleChange(e, 'dateField.field'), options: dateFieldOptions
+                                }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { children: "Table" }), _jsx(Select, { theme: theme, value: formData.dateField.table, onChange: (e) => handleChange(e, 'dateField.table'), options: dateFieldOptions.map((elem) => ({
+                                                    label: elem.name,
+                                                    value: elem.name,
+                                                })) })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { children: "Field" }), _jsx(Select, { theme: theme, value: removeDoubleQuotes(formData.dateField.field), onChange: (e) => handleChange(e, 'dateField.field'), options: dateFieldOptions
                                                     ?.find((elem) => elem.name === formData.dateField.table)
                                                     ?.columns?.map((elem) => ({
                                                     label: elem.name,
@@ -627,7 +708,7 @@ function ChartBuilderForm({ TextInput = MemoizedTextInput, Select = MemoizedSele
                             flexDirection: 'column',
                             gap: 12,
                             marginTop: 6,
-                        }, children: [_jsx(Header, { children: "Organization access" }), _jsx(SegmentedControl, { onChange: (e) => handleChange(e, 'template'), value: formData.template, theme: theme, organizationName: organizationName }), _jsx("br", {}), _jsx("br", {})] })), _jsxs("div", { style: {
+                        }, children: [_jsx(Header, { children: "Organization access" }), _jsx(SegmentedControl, { onChange: (e) => handleChange(e, 'template'), value: formData.template, theme: theme, organizationName: organizationName || 'This Organization' }), _jsx("br", {}), _jsx("br", {})] })), _jsxs("div", { style: {
                             display: 'flex',
                             flexDirection: 'row',
                             justifyContent: 'flex-end',
@@ -638,7 +719,7 @@ function ChartBuilderForm({ TextInput = MemoizedTextInput, Select = MemoizedSele
                                         ? 'Save changes'
                                         : 'Add to dashboard' })] })] })] }));
 }
-function SegmentedControl({ onChange, value, theme, organizationName = 'This Organization', }) {
+function SegmentedControl({ onChange, value, theme, organizationName, }) {
     return (_jsxs("div", { style: {
             display: 'flex',
             flexDirection: 'row',

package/dist/esm/ChartEditor.js

@@ -68,5 +68,5 @@ export default function ChartEditor({ isOpen, chartId, isEditMode, admin = false
             isSubscribed = false;
         };
     }, [client, chartId]);
-    return (_jsx("div", { children: dashboardItem && (_jsx(ChartBuilder, { dashboardItem: dashboardItem, rows: dashboardItem.rows, columns: dashboardItem.columns, fields: dashboardItem.fields, query: dashboardItem.queryString, isOpen: isOpen, isEditMode: isEditMode, setIsOpen: setIsOpen, showTableFormatOptions: admin, showDateFieldOptions: admin, showAccessControlOptions: admin, showDashboardDropdown: admin, destinationDashboard: destinationDashboard, dateRange: dateRange, Select: Select, TextInput: TextInput, Button: Button, SecondaryButton: SecondaryButton, Header: Header, Label: Label, Text: Text, DeleteButton: DeleteButton, Modal: Modal, Popover: Popover, onDelete: onDelete, title: chartBuilderTitle, buttonLabel: chartBuilderButtonLabel, organizationName: organizationName })) }));
+    return (_jsx("div", { children: dashboardItem && (_jsx(ChartBuilder, { dashboardItem: dashboardItem, rows: dashboardItem.rows, columns: dashboardItem.columns, fields: dashboardItem.fields, query: dashboardItem.queryString, pivot: dashboardItem.pivot, isOpen: isOpen, isEditMode: isEditMode, setIsOpen: setIsOpen, showTableFormatOptions: admin, showDateFieldOptions: admin, showAccessControlOptions: admin, showDashboardDropdown: admin, destinationDashboard: destinationDashboard, dateRange: dateRange, Select: Select, TextInput: TextInput, Button: Button, SecondaryButton: SecondaryButton, Header: Header, Label: Label, Text: Text, DeleteButton: DeleteButton, Modal: Modal, Popover: Popover, onDelete: onDelete, title: chartBuilderTitle, buttonLabel: chartBuilderButtonLabel, organizationName: organizationName })) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../../src/Dashboard.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../../src/Dashboard.tsx"],"names":[],"mappings":"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"}

package/dist/esm/Dashboard.js

@@ -479,6 +479,14 @@ export default function Dashboard({ name, containerStyle, chartContainerStyle =
                                     ? () => handleOnClickDashboardItem(item)
                                     : void null, children: _jsx(Chart, { containerStyle: chartContainerStyle, chartId: item._id, colors: theme.chartColors?.length
                                         ? theme.chartColors
-                                        : undefined, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid }) }, item.name + '' + index))) })), tables(section).length > 0 && (_jsx(DashboardSectionComponent, { section: "tables", children: tables(section).map((item, index) => (_jsx(DataLoader, { id: item._id, name: item.name, TableComponent: TableComponent, handleOnClickDashboardItem: handleOnClickDashboardItem, onClickDashboardItem: onClickDashboardItem, theme: theme }, `${item.name}${index}`))) }))] }, section + '' + sectionIndex));
+                                        : undefined, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid }) }, item.name + '' + index))) })), tables(section).length > 0 && (_jsx(DashboardSectionComponent, { section: "tables", children: tables(section).map((item, index) => (_jsx(DataLoader, { id: item._id, children: dashboard[item._id] && (_jsx(TableComponent, { theme: theme, dashboardItem: dashboard[item._id], onClickDashboardItem: onClickDashboardItem
+                                        ? () => handleOnClickDashboardItem(item)
+                                        : void null, children: _jsx(Chart, { config: dashboard[item._id], containerStyle: {
+                                            display: 'flex',
+                                            width: '100%',
+                                            height: '400px',
+                                        }, colors: theme.chartColors?.length
+                                            ? theme.chartColors
+                                            : undefined, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid }) })) }, `${item.name}${index}`))) }))] }, section + '' + sectionIndex));
             })] }));
 }