@quillsql/react 2.1.2 → 2.1.5

package/lib/AddToDashboardModal.js

@@ -1,16 +1,40 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatDateBuckets = exports.isArrayOfValidDates = exports.isValidDate = void 0;
+exports.formatDateBuckets = exports.isArrayOfValidDates = exports.isValidDate = exports.ChartForm = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 // @ts-nocheck
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const Context_1 = require("./Context");
-const formik_1 = require("formik");
 const date_fns_1 = require("date-fns");
 const Chart_1 = __importDefault(require("./Chart"));
+const ReportBuilder_1 = require("./ReportBuilder");
+const aggregate_1 = require("./utils/aggregate");
 function convertPostgresColumn(column) {
     let format;
     switch (column.dataTypeID) {
@@ -36,13 +60,13 @@ function convertPostgresColumn(column) {
     }
     return {
         label: column.name,
-        field: column.name,
+        field: column.field,
         format: format,
     };
 }
 function updateLabels(yAxisFields, values) {
     return yAxisFields.map((item, index) => {
-        let updatedItem = { ...item };
+        const updatedItem = { ...item };
         if (values[`yAxisLabel-${index}`]) {
             updatedItem.label = values[`yAxisLabel-${index}`];
         }
@@ -55,10 +79,63 @@ function updateLabels(yAxisFields, values) {
         return updatedItem;
     });
 }
-function AddToDashboardModal({ isOpen, setIsOpen, SelectComponent, TextInputComponent, ButtonComponent, SecondaryButtonComponent, rows, columns, query, ModalComponent, formHeaderStyle, formLabelStyle, showTableFormatOptions = false, showDateFieldOptions = false, onAddToDashboardComplete, }) {
+const DefaultSelectComponent = function DefaultSelect({ onChange, value, options, form, field, theme, }) {
+    return ((0, jsx_runtime_1.jsx)("select", { onChange: event => onChange(event.target.value), value: value, id: 'reportbuilderdropdown', style: {
+            width: 200,
+            outline: 'none',
+            textAlign: 'left',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            borderRadius: 6,
+            paddingLeft: 12,
+            paddingRight: 12,
+            height: 38,
+            borderWidth: theme.borderWidth,
+            borderColor: theme.borderColor,
+            boxSizing: 'border-box',
+            background: theme.backgroundColor,
+            color: theme.primaryTextColor,
+            boxShadow: '0 1px 2px 0 rgba(0,0,0,.05)',
+            fontFamily: theme.fontFamily,
+        }, children: options.map((option, index) => ((0, jsx_runtime_1.jsx)("option", { value: option.value, children: option.label }, option.label + index))) }));
+};
+const MemoizedDefaultSelectComponent = react_1.default.memo(DefaultSelectComponent);
+const DefaultTextInputComponent = function DefaultText({ onChange, value, id, theme, placeholder, }) {
+    return ((0, jsx_runtime_1.jsx)("input", { style: {
+            outline: 'none',
+            textAlign: 'left',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            borderRadius: 6,
+            paddingLeft: 12,
+            paddingRight: 12,
+            margin: 0,
+            paddingTop: 0,
+            paddingBottom: 0,
+            boxSizing: 'border-box',
+            width: 200,
+            height: 38,
+            borderWidth: theme.borderWidth,
+            borderColor: theme.borderColor,
+            borderStyle: 'solid',
+            background: theme.backgroundColor,
+            color: theme.primaryTextColor,
+            boxShadow: '0 1px 2px 0 rgba(0,0,0,.05)',
+            fontFamily: theme.fontFamily,
+        }, id: id, onChange: onChange, value: value, placeholder: placeholder }));
+};
+const MemoizedDefaultTextInputComponent = react_1.default.memo(DefaultTextInputComponent);
+function AddToDashboardModal({ isOpen, setIsOpen, SelectComponent, TextInputComponent, ButtonComponent, SecondaryButtonComponent, rows, columns, query, report, ModalComponent, formHeaderStyle, formLabelStyle, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, onAddToDashboardComplete, fields, }) {
     const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
     const [client] = (0, react_1.useContext)(Context_1.ClientContext);
     const [schema, setSchema] = (0, react_1.useContext)(Context_1.SchemaContext);
+    const [organization, setOrganization] = (0, react_1.useState)([]);
+    const { publicKey, environment } = client;
+    // showTableFormatOptions = false;
+    // showDateFieldOptions = false;
+    // showAccessControlOptions = false;3
     (0, react_1.useEffect)(() => {
         let isSubscribed = true;
         async function getSchema() {
@@ -98,32 +175,72 @@ function AddToDashboardModal({ isOpen, setIsOpen, SelectComponent, TextInputComp
             isSubscribed = false;
         };
     }, [schema]);
-    const editChart = async ({ report, values, yAxisFields, columns, query }) => {
+    (0, react_1.useEffect)(() => {
+        let isSubscribed = true;
+        async function getCustomers() {
+            const response = await fetch(`https://quill-344421.uc.r.appspot.com/orgs/${publicKey}/`, {
+                method: 'GET',
+                headers: {
+                    Authorization: 'Bearer ',
+                    environment: environment,
+                },
+            });
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+            const data = await response.json();
+            if (environment === 'STAGING') {
+                setOrganization(response.data.orgs.filter(org => org.id === client.stagingAdminCustomerId)[0]);
+            }
+            else {
+                setOrganization(data.orgs.filter(org => org.id === client.adminCustomerId)[0]);
+            }
+        }
+        if (isSubscribed && environment && client) {
+            getCustomers();
+        }
+        return () => {
+            isSubscribed = false;
+        };
+    }, [environment, client]);
+    const editChart = async ({ report, setIsSubmitting, values, yAxisFields, columns, query, buckets, showTableFormatOptions, }) => {
         const { publicKey, customerId, authToken, queryEndpoint, queryHeaders, withCredentials, environment, } = client;
-        const { xAxisLabel, yAxisLabel, chartName, chartType, xAxisField, xAxisFormat, dashboardName, dateFieldTable, dateField, } = values;
+        const { xAxisLabel, chartName, chartType, xAxisField, xAxisFormat, dashboardName, dateFieldTable, dateField, template, } = values;
         if (!chartName) {
             alert('Please enter a chart name');
             return;
         }
-        // if (!dashboardName) {
-        //   alert("Please choose a dashboard name");
-        //   return;
-        // }
-        // if (!xAxisLabel && chartType !== "pie" && chartType !== "table") {
-        //   alert("Please enter a label for the x-axis");
-        //   return;
-        // }
-        // if (!yAxisLabel && chartType !== "pie" && chartType !== "table") {
-        //   alert("Please enter a label for the y-axis");
-        //   return;
-        // }
-        const newYAxisFields = updateLabels(yAxisFields, values);
-        for (let i = 0; i < newYAxisFields.length; i++) {
-            if (!newYAxisFields[i].label && chartType !== 'pie') {
-                alert(`Please enter a label for column '${newYAxisFields[i].field}'`);
-                return;
-            }
+        if (!dashboardName) {
+            alert('Please choose a dashboard name');
+            return;
+        }
+        if (!xAxisLabel && chartType !== 'pie' && chartType !== 'table') {
+            alert('Please enter a label for the x-axis');
+            return;
+        }
+        if (!xAxisField) {
+            alert('Please enter a label for the x-axis');
+            return;
+        }
+        if (!yAxisFields.map(field => field.label).every(Boolean) &&
+            chartType !== 'pie' &&
+            chartType !== 'table') {
+            alert('Please enter a label for the y-axis');
+            return;
+        }
+        if (!columns.map((yAxisField, _) => yAxisField.label).every(Boolean) &&
+            showTableFormatOptions) {
+            alert('Please enter a label for the table y-axis');
+            return;
         }
+        setIsSubmitting(true);
+        // const newYAxisFields = updateLabels(yAxisFields, values);
+        // for (let i = 0; i < newYAxisFields.length; i++) {
+        //   if (!newYAxisFields[i].label && chartType !== 'pie') {
+        //     alert(`Please enter a label for column '${newYAxisFields[i].field}'`);
+        //     return;
+        //   }
+        // }
         if (!client || !customerId) {
             return;
         }
@@ -164,38 +281,87 @@ function AddToDashboardModal({ isOpen, setIsOpen, SelectComponent, TextInputComp
             };
             const body = JSON.stringify({
                 metadata: customerId
-                    ? {
-                        name: chartName,
-                        xAxisField,
-                        yAxisFields: newYAxisFields,
-                        xAxisLabel,
-                        xAxisFormat,
-                        yAxisLabel,
-                        chartType,
-                        dashboardName,
-                        columns: showTableFormatOptions ? columns : newYAxisFields,
-                        dateField: showDateFieldOptions
-                            ? { table: dateFieldTable, field: dateField }
-                            : defaultDateField,
-                        query: query,
-                        task: 'create',
-                        orgId: customerId,
-                    }
+                    ? report
+                        ? {
+                            dashboardItemId: report._id,
+                            name: chartName,
+                            xAxisField,
+                            yAxisFields,
+                            xAxisLabel,
+                            xAxisFormat,
+                            chartType,
+                            dashboardName,
+                            columns: showTableFormatOptions
+                                ? columns
+                                : [
+                                    ...yAxisFields,
+                                    {
+                                        field: xAxisField,
+                                        label: xAxisLabel,
+                                        format: xAxisFormat,
+                                    },
+                                ],
+                            dateField: showDateFieldOptions
+                                ? { table: dateFieldTable, field: dateField }
+                                : defaultDateField,
+                            query: query,
+                            task: 'create',
+                            orgId: customerId,
+                            template: template,
+                            buckets,
+                        }
+                        : {
+                            name: chartName,
+                            xAxisField,
+                            yAxisFields,
+                            xAxisLabel,
+                            xAxisFormat,
+                            chartType,
+                            dashboardName,
+                            columns: showTableFormatOptions
+                                ? columns
+                                : [
+                                    ...yAxisFields,
+                                    {
+                                        field: xAxisField,
+                                        label: xAxisLabel,
+                                        format: xAxisFormat,
+                                    },
+                                ],
+                            dateField: showDateFieldOptions
+                                ? { table: dateFieldTable, field: dateField }
+                                : defaultDateField,
+                            query: query,
+                            task: 'create',
+                            orgId: customerId,
+                            template: template,
+                            buckets,
+                        }
                     : {
                         name: chartName,
                         xAxisField,
-                        yAxisFields: newYAxisFields,
+                        yAxisFields,
                         xAxisLabel,
                         xAxisFormat,
-                        yAxisLabel,
                         chartType,
                         dashboardName,
-                        columns: showTableFormatOptions ? columns : newYAxisFields,
+                        columns: showTableFormatOptions
+                            ? columns
+                            : [
+                                ...yAxisFields,
+                                {
+                                    field: xAxisField,
+                                    label: xAxisLabel,
+                                    format: xAxisFormat,
+                                },
+                            ],
                         dateField: showDateFieldOptions
                             ? { table: dateFieldTable, field: dateField }
                             : defaultDateField,
                         query: query,
                         task: 'create',
+                        template: template,
+                        buckets,
                     },
             });
             const response = await fetch(url, {
@@ -240,26 +406,67 @@ function AddToDashboardModal({ isOpen, setIsOpen, SelectComponent, TextInputComp
             if (environment) {
                 headers['environment'] = environment;
             }
-            const body = JSON.stringify({
-                name: chartName,
-                xAxisField,
-                yAxisFields: newYAxisFields,
-                xAxisLabel,
-                xAxisFormat,
-                yAxisLabel,
-                chartType,
-                dashboardName,
-                columns: showTableFormatOptions ? columns : newYAxisFields,
-                dateField: showDateFieldOptions
-                    ? { table: dateFieldTable, field: dateField }
-                    : defaultDateField,
-                query: query,
-            });
+            let body2;
+            if (report) {
+                body2 = JSON.stringify({
+                    dashboardItemId: report._id,
+                    name: chartName,
+                    xAxisField,
+                    yAxisFields,
+                    xAxisLabel,
+                    xAxisFormat,
+                    chartType,
+                    dashboardName,
+                    columns: showTableFormatOptions
+                        ? columns
+                        : [
+                            ...yAxisFields,
+                            {
+                                field: xAxisField,
+                                label: xAxisLabel,
+                                format: xAxisFormat,
+                            },
+                        ],
+                    dateField: showDateFieldOptions
+                        ? { table: dateFieldTable, field: dateField }
+                        : defaultDateField,
+                    query: query,
+                    template: template,
+                    buckets,
+                });
+            }
+            else {
+                body2 = JSON.stringify({
+                    name: chartName,
+                    xAxisField,
+                    yAxisFields,
+                    xAxisLabel,
+                    xAxisFormat,
+                    chartType,
+                    dashboardName,
+                    columns: showTableFormatOptions
+                        ? columns
+                        : [
+                            ...yAxisFields,
+                            {
+                                field: xAxisField,
+                                label: xAxisLabel,
+                                format: xAxisFormat,
+                            },
+                        ],
+                    dateField: showDateFieldOptions
+                        ? { table: dateFieldTable, field: dateField }
+                        : defaultDateField,
+                    query: query,
+                    template: template,
+                    buckets,
+                });
+            }
             try {
                 const response = await fetch(url, {
                     method: 'POST',
                     headers: headers,
-                    body: body,
+                    body: body2,
                 });
                 responseData = await response.json();
                 setIsOpen(false);
@@ -284,38 +491,30 @@ function AddToDashboardModal({ isOpen, setIsOpen, SelectComponent, TextInputComp
         // TODO: fire callback instead so user can customize action
         // navigate("/dashboards");
     };
+    // console.log('report', report);
     return (
     // <BigModal theme={theme} showModal={isOpen} setShowModal={setIsOpen}>
-    (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: ModalComponent ? ((0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, title: 'Add to dashboard', onClose: () => setIsOpen(false), children: (0, jsx_runtime_1.jsx)(ChartForm, { editChart: editChart, theme: theme, schema: schema, data: rows, fields: columns, 
-                // leave null for now
-                report: null, query: query, 
-                // organizationName={organization?.name}
-                SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, formHeaderStyle: formHeaderStyle, formLabelStyle: formLabelStyle, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions }) })) : ((0, jsx_runtime_1.jsx)(QuillModal, { isOpen: isOpen, onClose: () => setIsOpen(false), title: 'Add to dashboard', children: (0, jsx_runtime_1.jsx)(ChartForm, { editChart: editChart, theme: theme, schema: schema, data: rows, fields: columns, 
-                // leave null for now
-                report: null, query: query, 
-                // organizationName={organization?.name}
-                SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, formHeaderStyle: formHeaderStyle, formLabelStyle: formLabelStyle, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions }) })) }));
+    (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: ModalComponent ? ((0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, title: 'Add to dashboard', onClose: () => setIsOpen(false), children: (0, jsx_runtime_1.jsx)(ChartForm, { editChart: editChart, theme: theme, schema: schema, data: rows, fields: columns, report: report, query: query, client: client, organizationName: organization?.name, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, formHeaderStyle: formHeaderStyle, formLabelStyle: formLabelStyle, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions, newFields: fields }) })) : ((0, jsx_runtime_1.jsx)(QuillModal, { isOpen: isOpen, onClose: () => setIsOpen(false), title: 'Add to dashboard', children: (0, jsx_runtime_1.jsx)(ChartForm, { editChart: editChart, theme: theme, schema: schema, data: rows, fields: columns, report: report, client: client, query: query, organizationName: organization?.name, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, formHeaderStyle: formHeaderStyle, formLabelStyle: formLabelStyle, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions, newFields: fields }) })) }));
 }
 exports.default = AddToDashboardModal;
 function QuillModal({ isOpen, setIsOpen, title, children }) {
-    let scrollPosition = 0;
-    (0, react_1.useEffect)(() => {
-        if (isOpen) {
-            scrollPosition = window.scrollY;
-            document.body.style.overflow = 'hidden';
-            document.body.style.position = 'fixed';
-            document.body.style.top = `-${scrollPosition}px`;
-            document.body.style.width = '100%';
-        }
-        else {
-            document.body.style.removeProperty('overflow');
-            document.body.style.removeProperty('position');
-            document.body.style.removeProperty('top');
-            document.body.style.removeProperty('width');
-            // Restore the scroll position
-            window.scrollTo(0, scrollPosition);
-        }
-    }, [isOpen]);
+    const scrollPosition = 0;
+    // useEffect(() => {
+    //   if (isOpen) {
+    //     scrollPosition = window.scrollY;
+    //     // document.body.style.overflow = 'hidden';
+    //     // document.body.style.position = 'fixed';
+    //     // document.body.style.top = `-${scrollPosition}px`;
+    //     // document.body.style.width = '100%';
+    //   } else {
+    //     document.body.style.removeProperty('overflow');
+    //     document.body.style.removeProperty('position');
+    //     document.body.style.removeProperty('top');
+    //     document.body.style.removeProperty('width');
+    //     // Restore the scroll position
+    //     window.scrollTo(0, scrollPosition);
+    //   }
+    // }, [isOpen]);
     if (!isOpen) {
         return null;
     }
@@ -368,14 +567,34 @@ function QuillModal({ isOpen, setIsOpen, title, children }) {
                                 textAlign: 'left',
                             }, children: title }), children] }) })] }));
 }
-function ChartForm({ data, fields, theme, saveVisualization, report, editChart, schema, query, 
-//   organizationName,
-SelectComponent, TextInputComponent, ButtonComponent, SecondaryButtonComponent, formHeaderStyle, formLabelStyle, showTableFormatOptions, showDateFieldOptions, }) {
+function ChartForm({ data, fields, theme, saveVisualization, report, editChart, schema, query, organizationName, SelectComponent, TextInputComponent, client, ButtonComponent, SecondaryButtonComponent, formHeaderStyle, formLabelStyle, showTableFormatOptions, showDateFieldOptions, showAccessControlOptions, newFields, }) {
+    if (report) {
+        newFields = report.fields;
+    }
     const fieldOptions = Object.keys(data[0]).map(field => ({
         value: field,
         label: field,
     }));
+    const xAxisOptions = Object.keys(data[0])
+        .filter(option => (0, ReportBuilder_1.getPostgresBasicType)(newFields.find(field => field.name === option)) ===
+        'date' ||
+        (0, ReportBuilder_1.getPostgresBasicType)(newFields.find(field => field.name === option)) ===
+            'string')
+        .map(field => ({
+        value: field,
+        label: field,
+    }));
+    const yAxisOptions = Object.keys(data[0])
+        .filter(option => 
+    // whatIsProbablyTheType([...data.slice(0, 10)], option) === 'number'
+    (0, ReportBuilder_1.getPostgresBasicType)(newFields.find(field => field.name === option)) ===
+        'number')
+        .map(field => ({
+        value: field,
+        label: field,
+    }));
     const [dateFieldOptions, setDateFieldOptions] = (0, react_1.useState)([]);
+    const [formValues, setFormValues] = (0, react_1.useState)({});
     (0, react_1.useEffect)(() => {
         const fetchReferencedTables = async () => {
             if (!query) {
@@ -386,115 +605,60 @@ SelectComponent, TextInputComponent, ButtonComponent, SecondaryButtonComponent,
         };
         fetchReferencedTables();
     }, [query, schema]);
-    return ((0, jsx_runtime_1.jsx)(formik_1.Formik, { initialValues: {
-            xAxisField: report?.xAxisField || fieldOptions[0].value,
-            xAxisLabel: report?.xAxisLabel || '',
-            xAxisFormat: report?.xAxisFormat || FORMAT_OPTIONS[0].value,
-            yAxisLabel: report?.yAxisLabel || '',
-            'yAxisLabel-0': '',
-            'yAxisLabel-1': '',
-            'yAxisLabel-2': '',
-            'yAxisLabel-3': '',
-            'yAxisFieldFormat-0': '',
-            'yAxisFieldFormat-1': '',
-            'yAxisFieldFormat-2': '',
-            'yAxisFieldFormat-3': '',
-            'yAxisField-0': '',
-            'yAxisField-1': '',
-            'yAxisField-2': '',
-            'yAxisField-3': '',
-            chartName: report?.name || '',
-            chartType: report?.chartType || 'column',
-            xAxisFieldLabel: '',
-            dashboardName: report?.dashboardName || '',
-            dateFieldTable: (dateFieldOptions.length && dateFieldOptions[0].name) || '',
-            dateField: (dateFieldOptions.length && dateFieldOptions[0].columns[0].name) ||
-                '',
-            template: report?.template || false,
-        }, onSubmit: () => { }, children: ({ values, isSubmitting, setFieldValue }) => ((0, jsx_runtime_1.jsx)(FormikForm, { values: values, isSubmitting: isSubmitting, data: data, fieldOptions: fieldOptions, dateFieldOptions: dateFieldOptions, theme: theme, saveVisualization: saveVisualization, report: report, editChart: editChart, fields: fields, query: query, setFieldValue: setFieldValue, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: false, 
-            //   organizationName={organizationName}
-            SelectComponent: SelectComponent
-                ? SelectComponent
-                : ({ onChange, value, options }) => {
-                    return ((0, jsx_runtime_1.jsx)("select", { onChange: event => onChange(event.target.value), value: value, id: 'reportbuilderdropdown', style: {
-                            width: 200,
-                            outline: 'none',
-                            textAlign: 'left',
-                            whiteSpace: 'nowrap',
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            borderRadius: 6,
-                            paddingLeft: 12,
-                            paddingRight: 12,
-                            height: 38,
-                            borderWidth: theme.borderWidth,
-                            borderColor: theme.borderColor,
-                            background: theme.backgroundColor,
-                            color: theme.primaryTextColor,
-                            boxShadow: '0 1px 2px 0 rgba(0,0,0,.05)',
-                            fontFamily: theme.fontFamily,
-                        }, children: options.map((option, index) => ((0, jsx_runtime_1.jsx)("option", { value: option.value, children: option.label }, option.label + index))) }));
-                }, TextInputComponent: TextInputComponent
-                ? TextInputComponent
-                : ({ onChange, value, id }) => {
-                    return ((0, jsx_runtime_1.jsx)("input", { style: {
-                            outline: 'none',
-                            textAlign: 'left',
-                            whiteSpace: 'nowrap',
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            borderRadius: 6,
-                            paddingLeft: 12,
-                            paddingRight: 12,
-                            width: 200,
-                            height: 38,
-                            borderWidth: theme.borderWidth,
-                            borderColor: theme.borderColor,
-                            borderStyle: 'solid',
-                            background: theme.backgroundColor,
-                            color: theme.primaryTextColor,
-                            boxShadow: '0 1px 2px 0 rgba(0,0,0,.05)',
-                            fontFamily: theme.fontFamily,
-                        }, id: id, onChange: onChange, value: value }));
-                }, ButtonComponent: ButtonComponent
-                ? ButtonComponent
-                : ({ onClick, label }) => {
-                    return ((0, jsx_runtime_1.jsx)("div", { style: {
-                            height: 38,
-                            background: theme.primaryButtonColor,
-                            color: theme.backgroundColor,
-                            display: 'flex',
-                            borderRadius: 6,
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            outline: 'none',
-                            cursor: 'pointer',
-                            fontFamily: theme.fontFamily,
-                            fontWeight: theme.buttonFontWeight || 600,
-                            border: 'none',
-                            fontSize: 14,
-                        }, onClick: onClick, children: label }));
-                }, SecondaryButtonComponent: ButtonComponent
-                ? ButtonComponent
-                : ({ onClick, label }) => {
-                    return ((0, jsx_runtime_1.jsx)("div", { style: {
-                            height: 38,
-                            background: theme.backgroundColor,
-                            borderWidth: theme.borderWidth,
-                            borderColor: theme.borderColor,
-                            color: theme.primaryTextColor,
-                            display: 'flex',
-                            borderRadius: 6,
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            outline: 'none',
-                            cursor: 'pointer',
-                            fontFamily: theme.fontFamily,
-                            fontWeight: theme.buttonFontWeight || 600,
-                            fontSize: 14,
-                        }, onClick: onClick, children: label }));
-                }, formHeaderStyle: formHeaderStyle, formLabelStyle: formLabelStyle })) }));
+    return ((0, jsx_runtime_1.jsx)(FormikForm, { data: data, xAxisOptions: xAxisOptions, yAxisOptions: yAxisOptions, fieldOptions: fieldOptions, dateFieldOptions: dateFieldOptions, theme: theme, saveVisualization: saveVisualization, report: report, editChart: editChart, client: client, fields: fields, newFields: newFields, query: query, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions, organizationName: organizationName, SelectComponent: SelectComponent
+            ? ({ onChange, value, options, form, field, }) => {
+                const handleChange = async (option) => {
+                    if (onChange) {
+                        onChange(option);
+                        return;
+                    }
+                    await form.setFieldValue(field.name, option);
+                    form.setFieldTouched(field.name, true);
+                };
+                return ((0, jsx_runtime_1.jsx)(SelectComponent, { onChange: event => handleChange(event.target.value), value: value, options: options }));
+            }
+            : MemoizedDefaultSelectComponent, TextInputComponent: TextInputComponent
+            ? TextInputComponent
+            : MemoizedDefaultTextInputComponent, ButtonComponent: ButtonComponent
+            ? ButtonComponent
+            : ({ onClick, label }) => {
+                return ((0, jsx_runtime_1.jsx)("div", { style: {
+                        height: 38,
+                        background: theme.primaryButtonColor,
+                        color: theme.backgroundColor,
+                        display: 'flex',
+                        borderRadius: 6,
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        outline: 'none',
+                        cursor: 'pointer',
+                        fontFamily: theme.fontFamily,
+                        fontWeight: theme.buttonFontWeight || 600,
+                        border: 'none',
+                        fontSize: 14,
+                    }, onClick: onClick, children: label }));
+            }, SecondaryButtonComponent: ButtonComponent
+            ? ButtonComponent
+            : ({ onClick, label }) => {
+                return ((0, jsx_runtime_1.jsx)("div", { style: {
+                        height: 38,
+                        background: theme.backgroundColor,
+                        borderWidth: theme.borderWidth,
+                        borderColor: theme.borderColor,
+                        color: theme.primaryTextColor,
+                        display: 'flex',
+                        borderRadius: 6,
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        outline: 'none',
+                        cursor: 'pointer',
+                        fontFamily: theme.fontFamily,
+                        fontWeight: theme.buttonFontWeight || 600,
+                        fontSize: 14,
+                    }, onClick: onClick, children: label }));
+            }, formHeaderStyle: formHeaderStyle, formLabelStyle: formLabelStyle }));
 }
+exports.ChartForm = ChartForm;
 function isValidDate(d) {
     return d instanceof Date && !isNaN(d);
 }
@@ -563,8 +727,8 @@ const POSTGRES_DATE_TYPES = [
 ];
 async function getReferencedTables(sqlQuery, databaseType, dbTables) {
     //   const parser = new Parser();
-    let tables = [];
-    let withAliases = [];
+    const tables = [];
+    const withAliases = [];
     const response = await fetch('https://quill-344421.uc.r.appspot.com/astify', {
         method: 'POST',
         headers: {
@@ -593,7 +757,20 @@ async function getReferencedTables(sqlQuery, databaseType, dbTables) {
     })
         .filter(table => table.columns.length > 0);
 }
-const FORMAT_OPTIONS = [
+const X_FORMAT_OPTIONS = [
+    { value: 'whole_number', label: 'whole number' },
+    { value: 'one_decimal_place', label: 'one decimal place' },
+    { value: 'dollar_amount', label: 'dollar amount' },
+    { value: 'MMM_yyyy', label: 'month' },
+    { value: 'MMM_dd-MMM_dd', label: 'week' },
+    { value: 'MMM_dd_yyyy', label: 'day' },
+    { value: 'MMM_dd_hh:mm_ap_pm', label: 'day and time' },
+    { value: 'hh_ap_pm', label: 'hour' },
+    { value: 'percent', label: 'percent' },
+    { value: 'string', label: 'string' },
+    { value: 'dynamic', label: 'dynamic' },
+];
+const Y_FORMAT_OPTIONS = [
     { value: 'whole_number', label: 'whole number' },
     { value: 'one_decimal_place', label: 'one decimal place' },
     { value: 'dollar_amount', label: 'dollar amount' },
@@ -605,19 +782,48 @@ const FORMAT_OPTIONS = [
     { value: 'percent', label: 'percent' },
     { value: 'string', label: 'string' },
 ];
-function FormikForm({ values, isSubmitting, data, fieldOptions, dateFieldOptions, theme, report, editChart, fields, query, SelectComponent, TextInputComponent, ButtonComponent, SecondaryButtonComponent, setFieldValue, organizationName, formHeaderStyle, formLabelStyle, showTableFormatOptions, showDateFieldOptions, showAccessControlOptions, }) {
+const handleBucketData = (dashboardItem, bucketFields, dateFilter) => {
+    const result = (0, aggregate_1.aggregate)(dashboardItem, bucketFields, dateFilter);
+    return (0, aggregate_1.aggregate)(dashboardItem, bucketFields, dateFilter);
+};
+function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldOptions, theme, report, editChart, fields, newFields, query, client, SelectComponent, TextInputComponent, ButtonComponent, SecondaryButtonComponent, organizationName, formHeaderStyle, formLabelStyle, showTableFormatOptions, showDateFieldOptions, showAccessControlOptions, }) {
+    // fieldOptions.sort((a, b) => {
+    //   if (a.value === 'created_at') return -1;
+    //   if (b.value === 'created_at') return 1;
+    //   return 0;
+    // });
+    X_FORMAT_OPTIONS.sort((a, b) => {
+        if (a.value === 'dynamic')
+            return -1;
+        if (b.value === 'dynamic')
+            return 1;
+        return 0;
+    });
+    const [rows, setRows] = (0, react_1.useState)(null);
+    const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
+    const { environment } = client;
+    const [xAxisField, setXAxisField] = (0, react_1.useState)(report?.xAxisField || xAxisOptions[0].value);
+    const [xAxisLabel, setXAxisLabel] = (0, react_1.useState)(report?.xAxisLabel || '');
+    const [xAxisFormat, setXAxisFormat] = (0, react_1.useState)(report?.xAxisFormat || X_FORMAT_OPTIONS[0].value);
+    const [chartName, setChartName] = (0, react_1.useState)(report?.name || '');
+    const [chartType, setChartType] = (0, react_1.useState)(report?.chartType || 'column');
+    const [dateFieldTable, setDateFieldTable] = (0, react_1.useState)((dateFieldOptions.length && dateFieldOptions[0].name) || '');
+    const [dateField, setDateField] = (0, react_1.useState)((dateFieldOptions.length && dateFieldOptions[0].columns[0].name) || '');
+    const [template, setTemplate] = (0, react_1.useState)(report?.template || false);
     const [chartConfig, setChartConfig] = (0, react_1.useState)({});
+    const { dateFilter } = (0, react_1.useContext)(Context_1.DateFilterContext);
     const [yAxisFields, setYAxisFields] = (0, react_1.useState)(report
         ? report.yAxisFields
         : [
             {
-                field: fieldOptions.length > 1
-                    ? fieldOptions[1].value
-                    : fieldOptions[0].value,
+                field: yAxisOptions.length > 1
+                    ? yAxisOptions[1].value
+                    : yAxisOptions[0].value,
                 label: '',
                 format: 'whole_number',
             },
         ]);
+    const [bucketFields, setBucketFields] = (0, react_1.useState)((report && report.buckets) || []);
     const [columns, setColumns] = (0, react_1.useState)(report && report.columns.length
         ? report.columns
         : fields?.length
@@ -629,12 +835,146 @@ function FormikForm({ values, isSubmitting, data, fieldOptions, dateFieldOptions
             { label: '', field: '', format: 'whole_number' },
         ]);
     };
+    const handleAddBucket = () => {
+        const bucketPossibilities = xAxisOptions.filter(option => 
+        // whatIsProbablyTheType(data.slice(0, 10), option.value) === 'date'
+        (0, ReportBuilder_1.getPostgresBasicType)(newFields.find(field => field.name === option.value)) === 'date');
+        if (!bucketPossibilities.length) {
+            alert('No possible buckets');
+            return;
+        }
+        setBucketFields([
+            ...bucketFields,
+            {
+                field: bucketPossibilities[0].value,
+            },
+        ]);
+        setXAxisField(bucketPossibilities[0].value);
+        if (bucketPossibilities[0].value === dateField) {
+            setXAxisFormat('dynamic');
+        }
+        else {
+            setXAxisFormat(
+            // whatIsProbablyTheType(data.slice(0, 10), bucketPossibilities[0].value)
+            (0, ReportBuilder_1.getPostgresBasicType)(newFields.find(field => field.name === bucketPossibilities[0].value)));
+        }
+    };
+    const [dashboardOptions, setDashboardOptions] = (0, react_1.useState)([]);
+    const [dashboardName, setDashboardName] = (0, react_1.useState)(report?.dashboardName || dashboardOptions[0]);
+    const values = {
+        xAxisLabel,
+        chartName,
+        chartType,
+        xAxisField,
+        xAxisFormat,
+        dashboardName,
+        dateFieldTable,
+        dateField,
+    };
+    const [selectedTabIndex, setSelectedTabIndex] = (0, react_1.useState)(values.template ? 1 : 0);
+    (0, react_1.useEffect)(() => {
+        if (dashboardOptions.length) {
+            setDashboardName(dashboardOptions[0].value);
+        }
+    }, [dashboardOptions]);
+    (0, react_1.useEffect)(() => {
+        async function getDashNames() {
+            const response2 = await fetch(`https://quill-344421.uc.r.appspot.com/dashnames/${client.publicKey}/`, {
+                method: 'GET',
+                headers: {
+                    Authorization: `Bearer `,
+                    environment: environment,
+                },
+            });
+            const response2Data = await response2.json();
+            setDashboardOptions(response2Data.dashboardNames
+                .filter(elem => elem !== null)
+                .map(key => ({ label: key, value: key })));
+        }
+        getDashNames();
+    }, []);
+    (0, react_1.useEffect)(() => {
+        // if (!dateField) {
+        //   return;
+        // }
+        // if (
+        //   (!bucketFields.length && chartType === 'column') ||
+        //   chartType === 'line'
+        // ) {
+        //   handleAddBucket();
+        //   return;
+        // }
+        if ((bucketFields.length && chartType === 'metric') ||
+            chartType === 'table' ||
+            chartType === 'pie') {
+            handleDeleteBucketField(0);
+            return;
+        }
+    }, [chartType, dateField]);
+    (0, react_1.useEffect)(() => {
+        if (dateFieldOptions.length) {
+            setDateFieldTable(dateFieldOptions[0].name);
+            setDateField(dateFieldOptions[0].columns[0].name);
+        }
+    }, [dateFieldOptions]);
     const handleDeleteYAxisField = index => {
         setYAxisFields(yAxisFields => yAxisFields.filter((_, i) => index !== i));
     };
+    const handleDeleteBucketField = index => {
+        setBucketFields(bucketFields => bucketFields.filter((_, i) => index !== i));
+        setXAxisField(xAxisOptions[0].value);
+        setXAxisLabel('');
+    };
+    const handleBucketFieldChange = (index, value) => {
+        if (!dateField) {
+            return;
+        }
+        const newBucketFields = [...bucketFields];
+        newBucketFields[index] = { ...newBucketFields[index], field: value };
+        setBucketFields(newBucketFields);
+        setXAxisField(value);
+        if (value === dateField) {
+            setXAxisFormat('dynamic');
+        }
+        else {
+            setXAxisFormat(
+            // whatIsProbablyTheType(data.slice(0, 10), value)
+            (0, ReportBuilder_1.getPostgresBasicType)(newFields.find(field => field.name === value)));
+        }
+    };
+    const handleXAxisFieldChange = value => {
+        if (!dateField) {
+            return;
+        }
+        // const newXAxisField = {
+        //   format: xAxisFormat,
+        //   label: xAxisLabel,
+        //   field: value,
+        // };
+        setXAxisField(value);
+        // TODO: MAKE DATE FIELD NOT HARD CODED
+        if (value === dateField) {
+            setXAxisFormat('dynamic');
+        }
+        else {
+            setXAxisFormat(
+            // whatIsProbablyTheType(data.slice(0, 10), value)
+            (0, ReportBuilder_1.getPostgresBasicType)(newFields.find(field => field.name === value)));
+        }
+        if (bucketFields.length > 0) {
+            const newBucketFields = [...bucketFields];
+            newBucketFields[0] = { ...newBucketFields[0], field: value };
+            setBucketFields(newBucketFields);
+        }
+    };
     const handleYAxisFieldChange = (index, value) => {
         const newYAxisFields = [...yAxisFields];
-        newYAxisFields[index] = { ...newYAxisFields[index], field: value };
+        newYAxisFields[index] = {
+            ...newYAxisFields[index],
+            field: value,
+            // format: whatIsProbablyTheType(data.slice(0, 10), value),
+            format: (0, ReportBuilder_1.getPostgresBasicType)(newFields.find(field => field.name === value)),
+        };
         setYAxisFields(newYAxisFields);
     };
     const handleYAxisFieldFormatChange = (index, value) => {
@@ -642,7 +982,7 @@ function FormikForm({ values, isSubmitting, data, fieldOptions, dateFieldOptions
         newYAxisFields[index] = { ...newYAxisFields[index], format: value };
         setYAxisFields(newYAxisFields);
     };
-    const handleYAxisFieldLabelChange = (index, value) => {
+    const handleYAxisLabelChange = (index, value) => {
         const newYAxisFields = [...yAxisFields];
         newYAxisFields[index] = { ...newYAxisFields[index], label: value };
         setYAxisFields(newYAxisFields);
@@ -663,10 +1003,37 @@ function FormikForm({ values, isSubmitting, data, fieldOptions, dateFieldOptions
         setColumns(newColumns);
     };
     (0, react_1.useEffect)(() => {
-        setChartConfig({ ...values, yAxisFields: yAxisFields, rows: data });
-    }, [values, yAxisFields]);
-    // console.log('VIBE: ', { report, values, yAxisFields, columns, query });
-    return ((0, jsx_runtime_1.jsx)(formik_1.Form, { style: { display: 'inline-block' }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+        const now = new Date();
+        setChartConfig(handleBucketData({
+            xAxisField,
+            xAxisLabel,
+            xAxisFormat,
+            chartName,
+            chartType,
+            dashboardName,
+            dateFieldTable,
+            dateField,
+            template,
+            yAxisFields: yAxisFields,
+            rows: data,
+            fields: newFields,
+            columns: columns,
+        }, bucketFields, dateFilter));
+    }, [
+        xAxisField,
+        xAxisLabel,
+        xAxisFormat,
+        chartName,
+        chartType,
+        dashboardName,
+        dateFieldTable,
+        dateField,
+        template,
+        yAxisFields,
+        bucketFields,
+        columns,
+    ]);
+    return ((0, jsx_runtime_1.jsx)("div", { style: { display: 'inline-block' }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                 display: 'flex',
                 flexDirection: 'column',
                 paddingLeft: 25,
@@ -675,76 +1042,114 @@ function FormikForm({ values, isSubmitting, data, fieldOptions, dateFieldOptions
                         display: 'flex',
                         flexDirection: 'column',
                     }, children: [(0, jsx_runtime_1.jsx)("div", { style: { height: 20 } }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                marginRight: chartConfig.chartType === 'pie' ? undefined : 25,
-                                marginLeft: chartConfig.chartType === 'pie' ? undefined : -25,
-                            }, children: Object.keys(chartConfig).length > 0 && ((0, jsx_runtime_1.jsx)(Chart_1.default, { chartId: "646e37a660feef000be67a93", config: chartConfig, colors: theme.chartColors, containerStyle: {
-                                    width: 'calc(100% - 24px)',
+                                marginRight: chartConfig.chartType === 'pie' ||
+                                    chartConfig.chartType === 'table'
+                                    ? undefined
+                                    : 25,
+                                marginLeft: chartConfig.chartType === 'pie' ||
+                                    chartConfig.chartType === 'table'
+                                    ? undefined
+                                    : -25,
+                            }, children: Object.keys(chartConfig).length > 0 && ((0, jsx_runtime_1.jsx)(Chart_1.default, { config: chartConfig, colors: theme.chartColors, containerStyle: {
+                                    width: chartConfig.chartType === 'table'
+                                        ? 640
+                                        : 'calc(100% - 24px)',
                                     height: 300,
-                                } })) }), (0, jsx_runtime_1.jsx)("div", { style: { height: 40 } }), showTableFormatOptions || showDateFieldOptions ? ((0, jsx_runtime_1.jsx)("div", { style: formHeaderStyle || {
-                                fontFamily: theme.fontFamily,
-                                color: theme.primaryTextColor,
-                                fontSize: theme?.fontSize ? theme?.fontSize + 2 : 14,
-                                fontWeight: 600,
-                                // marginTop: 20,
-                            }, children: 'Chart' })) : null, (0, jsx_runtime_1.jsxs)("div", { style: {
+                                } })) }), (0, jsx_runtime_1.jsx)("div", { style: { height: 40 } }), showTableFormatOptions || showDateFieldOptions ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { style: formHeaderStyle || {
+                                    fontFamily: theme.fontFamily,
+                                    color: theme.primaryTextColor,
+                                    fontSize: theme.fontSize + 2,
+                                    fontWeight: 600,
+                                }, children: 'Chart' }) })) : null, (0, jsx_runtime_1.jsxs)("div", { style: {
                                 display: 'flex',
                                 flexDirection: 'row',
                                 alignItems: 'center',
                             }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', marginTop: 8 }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
-                                                fontSize: '14px',
-                                                marginBottom: '6px',
-                                                fontWeight: '600',
                                                 color: theme.secondaryTextColor,
                                                 fontFamily: theme?.fontFamily,
-                                            }, children: "Name" }), (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200 }, children: (0, jsx_runtime_1.jsx)(formik_1.Field, { name: "chartName", component: TextInputComponent, theme: theme }) })] }), (0, jsx_runtime_1.jsx)("div", { style: { width: 20 } }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', marginTop: 8 }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
-                                                fontFamily: theme.fontFamily,
+                                                fontSize: theme?.fontSize || '14px',
+                                                fontWeight: theme.labelFontWeight || '600',
+                                            }, children: "Name" }), (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200, marginTop: 6 }, children: (0, jsx_runtime_1.jsx)(TextInputComponent, { onChange: e => setChartName(e.target.value), value: chartName, theme: theme, placeholder: 'Enter a chart name' }) })] }), (0, jsx_runtime_1.jsx)("div", { style: { width: 20 } }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', marginTop: 8 }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
                                                 color: theme.secondaryTextColor,
-                                                fontSize: theme?.fontSize,
-                                                fontWeight: theme.labelFontWeight,
-                                            }, children: "Dashboard name" }), (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200, marginTop: 6 }, children: (0, jsx_runtime_1.jsx)(formik_1.Field, { name: "dashboardName", component: TextInputComponent, theme: theme }) })] }), (0, jsx_runtime_1.jsx)("div", { style: { width: 20 } }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', marginTop: 8 }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
-                                                fontFamily: theme.fontFamily,
+                                                fontFamily: theme?.fontFamily,
+                                                fontSize: theme?.fontSize || '14px',
+                                                fontWeight: theme.labelFontWeight || '600',
+                                            }, children: "Dashboard name" }), (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200, marginTop: 6 }, children: (0, jsx_runtime_1.jsx)(SelectComponent, { onChange: value => setDashboardName(value), value: dashboardName, theme: theme, options: dashboardOptions }) })] }), (0, jsx_runtime_1.jsx)("div", { style: { width: 20 } }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', marginTop: 8 }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
+                                                fontSize: '14px',
                                                 color: theme.secondaryTextColor,
-                                                fontSize: theme.fontSize,
-                                                fontWeight: theme.labelFontWeight,
-                                            }, children: "Chart type" }), (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200, marginTop: 6 }, children: (0, jsx_runtime_1.jsx)(formik_1.Field, { name: "chartType", component: SelectComponent, theme: theme, options: [
+                                                fontFamily: theme?.fontFamily,
+                                                fontSize: theme?.fontSize || '14px',
+                                                fontWeight: theme.labelFontWeight || '600',
+                                            }, children: "Chart type" }), (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200, marginTop: 6 }, children: (0, jsx_runtime_1.jsx)(SelectComponent, { onChange: e => setChartType(e), value: chartType, options: [
                                                     { label: 'column', value: 'column' },
                                                     { label: 'bar', value: 'bar' },
                                                     { label: 'line', value: 'line' },
                                                     { label: 'pie', value: 'pie' },
                                                     { label: 'metric', value: 'metric' },
                                                     { label: 'table', value: 'table' },
-                                                ] }) })] })] })] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                                ], theme: theme }) })] })] })] }), chartType !== 'table' &&
+                    chartType !== 'metric' &&
+                    chartType !== 'pie' && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        marginTop: 20,
+                        maxWidth: 200,
+                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
+                                color: theme.secondaryTextColor,
+                                fontFamily: theme?.fontFamily,
+                                fontSize: theme?.fontSize || '14px',
+                                fontWeight: theme.labelFontWeight || '600',
+                            }, children: "Buckets" }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                maxWidth: 200,
+                                // marginTop: 6,
+                                display: 'flex',
+                                flexDirection: 'column',
+                            }, children: bucketFields.map((bucketField, index) => ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    marginTop: index === 0 ? 6 : 10,
+                                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200 }, children: (0, jsx_runtime_1.jsx)(SelectComponent, { onChange: option => handleBucketFieldChange(index, option), value: bucketField.field, 
+                                            // TODO: PROB FILTER OUT NUMBERS LMAO (SO DATE AND STRING ONLY)
+                                            options: xAxisOptions, theme: theme }) }), (0, jsx_runtime_1.jsx)("div", { onClick: () => handleDeleteBucketField(index), style: {
+                                            cursor: 'pointer',
+                                            paddingLeft: 6,
+                                            paddingTop: 9,
+                                            paddingBottom: 9,
+                                            paddingRight: 6,
+                                            maxHeight: 38,
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'center',
+                                        }, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: theme?.secondaryTextColor, height: "20", width: "20", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z", clipRule: "evenodd" }) }) })] }, `bucketField-${index}`))) }), !bucketFields.length && ((0, jsx_runtime_1.jsx)("div", { style: { marginTop: 12 }, children: (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: handleAddBucket, label: "Add bucket +" }) }))] })), (0, jsx_runtime_1.jsx)("div", { style: {
                         display: 'flex',
                         flexDirection: 'row',
                         alignItems: 'center',
                         // justifyContent: 'space-between',
                         marginTop: 20,
-                    }, children: values.chartType !== 'table' && ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
-                                    fontFamily: theme.fontFamily,
+                    }, children: chartType !== 'table' && ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
                                     color: theme.secondaryTextColor,
-                                    fontSize: theme.fontSize,
-                                    fontWeight: theme.labelFontWeight,
-                                }, children: values.chartType === 'pie'
-                                    ? 'Category column'
-                                    : 'x-axis column' }), (0, jsx_runtime_1.jsx)("div", { style: { height: 6 } }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                    fontFamily: theme?.fontFamily,
+                                    fontSize: theme?.fontSize || '14px',
+                                    fontWeight: theme.labelFontWeight || '600',
+                                }, children: chartType === 'pie' ? 'Category column' : 'x-axis column' }), (0, jsx_runtime_1.jsx)("div", { style: { height: 6 } }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'row',
                                     alignItems: 'center',
-                                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200 }, children: (0, jsx_runtime_1.jsx)(formik_1.Field, { name: "xAxisField", component: SelectComponent, theme: theme, options: fieldOptions }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 20 } }), (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200 }, children: (0, jsx_runtime_1.jsx)(formik_1.Field, { name: "xAxisLabel", component: TextInputComponent, theme: theme }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 20 } }), (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200 }, children: (0, jsx_runtime_1.jsx)(formik_1.Field, { name: "xAxisFormat", component: SelectComponent, theme: theme, options: FORMAT_OPTIONS }) })] })] })) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200 }, children: (0, jsx_runtime_1.jsx)(SelectComponent, { onChange: e => handleXAxisFieldChange(e), value: xAxisField, options: xAxisOptions, theme: theme }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 20 } }), (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200 }, children: (0, jsx_runtime_1.jsx)(TextInputComponent, { onChange: e => setXAxisLabel(e.target.value), value: xAxisLabel, theme: theme, placeholder: 'Enter a label' }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 20 } }), (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200 }, children: (0, jsx_runtime_1.jsx)(SelectComponent, { onChange: e => setXAxisFormat(e), value: xAxisFormat, options: X_FORMAT_OPTIONS, theme: theme }) })] })] })) }), (0, jsx_runtime_1.jsxs)("div", { style: {
                         display: 'flex',
                         flexDirection: 'row',
                         alignItems: 'flex-start',
                         // justifyContent: 'space-between',
                         marginTop: 20,
                     }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
-                                        fontFamily: theme.fontFamily,
                                         color: theme.secondaryTextColor,
-                                        fontSize: theme.fontSize,
-                                        fontWeight: theme.labelFontWeight,
-                                        minWidth: 200,
-                                    }, children: values.chartType === 'table'
+                                        fontFamily: theme?.fontFamily,
+                                        fontSize: theme?.fontSize || '14px',
+                                        fontWeight: theme.labelFontWeight || '600',
+                                    }, children: chartType === 'table'
                                         ? 'Columns'
-                                        : values.chartType === 'pie'
+                                        : chartType === 'pie'
                                             ? 'Quantity column'
                                             : 'y-axis columns' }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                         display: 'flex',
@@ -754,24 +1159,24 @@ function FormikForm({ values, isSubmitting, data, fieldOptions, dateFieldOptions
                                                 flexDirection: 'row',
                                                 alignItems: 'center',
                                                 marginTop: index === 0 ? 6 : 10,
-                                            }, children: (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200 }, children: (0, jsx_runtime_1.jsx)(formik_1.Field, { name: `yAxisField-${index}`, component: SelectComponent, theme: theme, value: yAxisField.field, onChange: option => handleYAxisFieldChange(index, option), options: fieldOptions }) }) }, `yAxisField-${index}`))), values.chartType !== 'pie' && ((0, jsx_runtime_1.jsx)("div", { style: { marginTop: 12 }, children: (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: handleAddYAxisField, label: "Add column +" }) })), (0, jsx_runtime_1.jsx)("div", { style: { height: 10 } })] })] }), (0, jsx_runtime_1.jsx)("div", { style: { width: 20 } }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                            }, children: (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200 }, children: (0, jsx_runtime_1.jsx)(SelectComponent, { onChange: option => handleYAxisFieldChange(index, option), value: yAxisField.field, options: yAxisOptions, theme: theme }) }) }, `yAxisField-${index}`))), chartType !== 'pie' && ((0, jsx_runtime_1.jsx)("div", { style: { marginTop: 12 }, children: (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: handleAddYAxisField, label: "Add column +" }) })), (0, jsx_runtime_1.jsx)("div", { style: { height: 10 } })] })] }), (0, jsx_runtime_1.jsx)("div", { style: { width: 20 } }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                 display: 'flex',
                                 flexDirection: 'column',
                                 justifyContent: 'flex-start',
                             }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
-                                        fontFamily: theme.fontFamily,
                                         color: 'transparent',
-                                        fontSize: theme.fontSize,
-                                        fontWeight: theme.labelFontWeight,
-                                        minWidth: 200,
-                                        //   marginBottom: 10,
-                                    }, children: "y-axis label" }), values.chartType !== 'pie' &&
+                                        fontFamily: theme?.fontFamily,
+                                        fontSize: theme?.fontSize || '14px',
+                                        fontWeight: theme.labelFontWeight || '600',
+                                    }, children: "y-axis label" }), chartType !== 'pie' &&
                                     yAxisFields.map((yAxisField, index) => ((0, jsx_runtime_1.jsxs)("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'row',
-                                            alignItems: 'center',
+                                            // alignItems: 'center',
                                             marginTop: index === 0 ? 6 : 10,
-                                        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200 }, children: (0, jsx_runtime_1.jsx)(formik_1.Field, { name: `yAxisLabel-${index}`, component: TextInputComponent, theme: theme, placeholder: "Enter column label" }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 20 } }), (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200 }, children: (0, jsx_runtime_1.jsx)(formik_1.Field, { name: `yAxisFieldFormat-${index}`, component: SelectComponent, theme: theme, value: yAxisField.format, onChange: option => handleYAxisFieldFormatChange(index, option), options: FORMAT_OPTIONS }) }), (0, jsx_runtime_1.jsx)("div", { onClick: () => index > 0 ? handleDeleteYAxisField(index) : undefined, style: {
+                                        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200 }, children: (0, jsx_runtime_1.jsx)(TextInputComponent, { value: yAxisFields[index].label, onChange: e => {
+                                                        handleYAxisLabelChange(index, e.target.value);
+                                                    }, theme: theme, placeholder: 'Enter a label' }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 20 } }), (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200 }, children: (0, jsx_runtime_1.jsx)(SelectComponent, { onChange: value => handleYAxisFieldFormatChange(index, value), value: yAxisField.format, options: Y_FORMAT_OPTIONS, theme: theme }) }), (0, jsx_runtime_1.jsx)("div", { onClick: () => index > 0 ? handleDeleteYAxisField(index) : undefined, style: {
                                                     cursor: index > 0 ? 'pointer' : undefined,
                                                     paddingLeft: 6,
                                                     paddingTop: 12,
@@ -781,79 +1186,175 @@ function FormikForm({ values, isSubmitting, data, fieldOptions, dateFieldOptions
                                                     display: 'flex',
                                                     alignItems: 'center',
                                                     justifyContent: 'center',
-                                                }, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: index > 0 ? theme?.secondaryTextColor : 'rgba(0,0,0,0)', height: "20", width: "20", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z", clipRule: "evenodd" }) }) })] }, `yAxisField-${index}`)))] })] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 20 } }), showTableFormatOptions && ((0, jsx_runtime_1.jsx)("div", { style: formHeaderStyle || {
-                        fontFamily: theme.fontFamily,
-                        color: theme.primaryTextColor,
-                        fontSize: theme.fontSize + 2,
-                        fontWeight: 600,
-                    }, children: 'Table' })), showTableFormatOptions && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                                }, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: index > 0 ? theme?.secondaryTextColor : 'rgba(0,0,0,0)', height: "20", width: "20", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z", clipRule: "evenodd" }) }) })] }, `yAxisField-${index}`)))] })] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 20 } }), showTableFormatOptions && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: formHeaderStyle || {
+                                fontFamily: theme.fontFamily,
+                                color: theme.primaryTextColor,
+                                fontSize: theme.fontSize + 2,
+                                fontWeight: 600,
+                                // marginTop: 20,
+                            }, children: 'Table' }), (0, jsx_runtime_1.jsx)("div", { style: { height: 8 } })] })), showTableFormatOptions && ((0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
+                        color: theme.secondaryTextColor,
+                        fontFamily: theme?.fontFamily,
+                        fontSize: theme?.fontSize || '14px',
+                        fontWeight: theme.labelFontWeight || '600',
+                    }, children: 'Columns' })), showTableFormatOptions && ((0, jsx_runtime_1.jsxs)("div", { style: {
                         display: 'flex',
                         flexDirection: 'row',
                         alignItems: 'flex-start',
                         marginTop: 6,
                         // justifyContent: 'space-between',
                         // marginTop: 8,
-                    }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
-                                        fontFamily: theme.fontFamily,
-                                        color: theme.secondaryTextColor,
-                                        fontSize: theme.fontSize,
-                                        fontWeight: theme.labelFontWeight,
-                                    }, children: 'Columns' }), (0, jsx_runtime_1.jsxs)("div", { style: {
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                    }, children: [columns.map((yAxisField, index) => ((0, jsx_runtime_1.jsx)("div", { style: {
-                                                display: 'flex',
-                                                flexDirection: 'row',
-                                                alignItems: 'center',
-                                                marginTop: index === 0 ? 6 : 10,
-                                            }, children: (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200 }, children: (0, jsx_runtime_1.jsx)(formik_1.Field, { name: `column-${index}`, component: SelectComponent, theme: theme, value: yAxisField.field, onChange: option => handleColumnFieldChange(index, option), options: fieldOptions }) }) }, `column-${index}`))), (0, jsx_runtime_1.jsx)("div", { style: { height: 10 } })] })] }), (0, jsx_runtime_1.jsx)("div", { style: { width: 20 } }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column' }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                }, children: [columns.map((yAxisField, index) => ((0, jsx_runtime_1.jsx)("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            alignItems: 'center',
+                                            marginTop: index === 0 ? 6 : 10,
+                                        }, children: (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200 }, children: (0, jsx_runtime_1.jsx)(SelectComponent, { value: yAxisField.field, onChange: option => {
+                                                    handleColumnFieldChange(index, option);
+                                                }, options: fieldOptions, theme: theme }) }) }, `column-${index}`))), (0, jsx_runtime_1.jsx)("div", { style: { height: 10 } })] }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 20 } }), (0, jsx_runtime_1.jsx)("div", { style: {
                                 display: 'flex',
                                 flexDirection: 'column',
                                 justifyContent: 'flex-start',
-                            }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
-                                        fontFamily: theme.fontFamily,
-                                        color: 'transparent',
-                                        fontSize: theme.fontSize,
-                                        fontWeight: theme.labelFontWeight,
-                                        minWidth: 200,
-                                        //   marginBottom: 10,
-                                    }, children: "label" }), columns.map((yAxisField, index) => ((0, jsx_runtime_1.jsxs)("div", { style: {
-                                        display: 'flex',
-                                        flexDirection: 'row',
-                                        alignItems: 'center',
-                                        marginTop: index === 0 ? 6 : 10,
-                                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200 }, children: (0, jsx_runtime_1.jsx)(formik_1.Field, { name: `columnlabel-${index}`, component: TextInputComponent, theme: theme, placeholder: "Enter column label", value: yAxisField.label, onChange: event => handleColumnLabelChange(index, event.target.value) }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 20 } }), (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200 }, children: (0, jsx_runtime_1.jsx)(formik_1.Field, { name: `columnFormat-${index}`, component: SelectComponent, theme: theme, value: yAxisField.format, onChange: option => handleColumnFormatChange(index, option), options: FORMAT_OPTIONS }) })] }, `column-${index}`)))] })] })), showDateFieldOptions && (0, jsx_runtime_1.jsx)("div", { style: { height: 20 } }), showDateFieldOptions && ((0, jsx_runtime_1.jsx)("div", { style: formHeaderStyle || {
-                        fontFamily: theme.fontFamily,
-                        color: theme.primaryTextColor,
-                        fontSize: theme.fontSize + 2,
-                        fontWeight: 600,
-                        // marginTop: 20,
-                    }, children: 'Filters' })), showDateFieldOptions && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                            }, children: columns.map((yAxisField, index) => ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    marginTop: index === 0 ? 6 : 10,
+                                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200 }, children: (0, jsx_runtime_1.jsx)(TextInputComponent, { theme: theme, placeholder: "Enter column label", value: yAxisField.label, onChange: event => handleColumnLabelChange(index, event.target.value) }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 20 } }), (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200 }, children: (0, jsx_runtime_1.jsx)(SelectComponent, { value: yAxisField.format, onChange: option => handleColumnFormatChange(index, option), options: Y_FORMAT_OPTIONS, theme: theme }) })] }, `column-${index}`))) })] })), showDateFieldOptions && (0, jsx_runtime_1.jsx)("div", { style: { height: 20 } }), showDateFieldOptions && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: formHeaderStyle || {
+                                fontFamily: theme.fontFamily,
+                                color: theme.primaryTextColor,
+                                fontSize: theme.fontSize + 2,
+                                fontWeight: 600,
+                                // marginTop: 20,
+                            }, children: 'Filters' }), (0, jsx_runtime_1.jsx)("div", { style: { height: 8 } })] })), showDateFieldOptions && ((0, jsx_runtime_1.jsxs)("div", { style: {
                         display: 'flex',
                         flexDirection: 'row',
                         alignItems: 'center',
-                    }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', marginTop: 8 }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
-                                        fontFamily: theme.fontFamily,
+                    }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
                                         color: theme.secondaryTextColor,
-                                        fontSize: theme.fontSize,
-                                        fontWeight: theme.labelFontWeight,
-                                    }, children: "Date field table" }), (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200, marginTop: 6 }, children: (0, jsx_runtime_1.jsx)(formik_1.Field, { name: "dateFieldTable", component: SelectComponent, theme: theme, options: !dateFieldOptions.length
+                                        fontFamily: theme?.fontFamily,
+                                        fontSize: theme?.fontSize || '14px',
+                                        fontWeight: theme.labelFontWeight || '600',
+                                    }, children: "Date field table" }), (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200, marginTop: 6 }, children: (0, jsx_runtime_1.jsx)(SelectComponent, { options: !dateFieldOptions.length
                                             ? [{ label: '', value: '' }]
                                             : dateFieldOptions.map(elem => {
                                                 return { label: elem.name, value: elem.name };
-                                            }) }) })] }), (0, jsx_runtime_1.jsx)("div", { style: { width: 20 } }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
-                                        fontFamily: theme.fontFamily,
+                                            }), onChange: e => setDateFieldTable(e), value: dateFieldTable, theme: theme }) })] }), (0, jsx_runtime_1.jsx)("div", { style: { width: 20 } }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
                                         color: theme.secondaryTextColor,
-                                        fontSize: theme.fontSize,
-                                        fontWeight: theme.labelFontWeight,
-                                    }, children: "Date field" }), (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200, marginTop: 6 }, children: (0, jsx_runtime_1.jsx)(formik_1.Field, { name: "dateField", component: SelectComponent, theme: theme, options: !dateFieldOptions.length
+                                        fontFamily: theme?.fontFamily,
+                                        fontSize: theme?.fontSize || '14px',
+                                        fontWeight: theme.labelFontWeight || '600',
+                                    }, children: "Date field" }), (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 200, marginTop: 6 }, children: (0, jsx_runtime_1.jsx)(SelectComponent, { options: !dateFieldOptions.length
                                             ? [{ label: '', value: '' }]
-                                            : dateFieldOptions.filter(elem => elem.name === values.dateFieldTable).length
+                                            : dateFieldOptions.filter(elem => elem.name === dateFieldTable // Replace `values.dateFieldTable` with your state variable or prop
+                                            ).length
                                                 ? dateFieldOptions
-                                                    .filter(elem => elem.name === values.dateFieldTable)[0]
+                                                    .filter(elem => elem.name === dateFieldTable)[0]
                                                     .columns.map(elem => {
                                                     return { label: elem.name, value: elem.name };
                                                 })
-                                                : [{ label: '', value: '' }] }) })] })] })), (0, jsx_runtime_1.jsx)("div", { style: { paddingRight: 25 }, children: (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: () => editChart({ report, values, yAxisFields, columns, query }), label: report ? 'Save changes' : 'Add to dashboard' }) }), (0, jsx_runtime_1.jsx)("div", { style: { height: 20 } })] }) }));
+                                                : [{ label: '', value: '' }], onChange: value => setDateField(value), value: dateField, theme: theme }) })] })] })), showAccessControlOptions && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        marginTop: 40,
+                        marginBottom: 40,
+                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                fontFamily: theme.fontFamily,
+                                color: theme.primaryTextColor,
+                                fontSize: theme.fontSize + 2,
+                                fontWeight: 600,
+                            }, children: 'Access Control' }), (0, jsx_runtime_1.jsx)("div", { style: { height: 12 } }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                padding: '1px',
+                                display: 'flex',
+                                flexDirection: 'row',
+                                fontSize: '14px',
+                                fontWeight: '500',
+                                height: '32px',
+                                width: '640px',
+                                color: '#212121',
+                                backgroundColor: 'rgba(33, 33, 33, 0.03)',
+                                borderRadius: '6px',
+                            }, children: [(0, jsx_runtime_1.jsx)("div", { onClick: () => {
+                                        setSelectedTabIndex(0);
+                                        setTemplate(false);
+                                    }, style: {
+                                        width: '100%',
+                                        borderRadius: '6px',
+                                        padding: '4px',
+                                        fontSize: '14px',
+                                        fontWeight: '500',
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        cursor: 'pointer',
+                                        borderColor: '#E7E7E7',
+                                        borderWidth: selectedTabIndex === 0 ? 1 : 0,
+                                        borderStyle: 'solid',
+                                        color: selectedTabIndex === 0
+                                            ? '#212121'
+                                            : 'rgba(33, 33, 33, 0.3)',
+                                        backgroundColor: selectedTabIndex === 0
+                                            ? 'white'
+                                            : 'rgba(255, 255, 255, 0.12)',
+                                        boxShadow: selectedTabIndex === 0
+                                            ? '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)'
+                                            : undefined,
+                                        outline: 'none', // focus:outline-none
+                                    }, children: `This Organization${organizationName ? ` (${organizationName})` : ``}` }), (0, jsx_runtime_1.jsx)("div", { onClick: () => {
+                                        setSelectedTabIndex(1);
+                                        setTemplate(true);
+                                    }, style: {
+                                        width: '100%',
+                                        borderRadius: '6px',
+                                        padding: '4px',
+                                        fontSize: '14px',
+                                        fontWeight: '500',
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        cursor: 'pointer',
+                                        borderColor: '#E7E7E7',
+                                        borderWidth: selectedTabIndex === 1 ? 1 : 0,
+                                        borderStyle: 'solid',
+                                        color: selectedTabIndex === 1
+                                            ? '#212121'
+                                            : 'rgba(33, 33, 33, 0.3)',
+                                        backgroundColor: selectedTabIndex === 1
+                                            ? 'white'
+                                            : 'rgba(255, 255, 255, 0.12)',
+                                        boxShadow: selectedTabIndex === 1
+                                            ? '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)'
+                                            : undefined,
+                                        outline: 'none', // focus:outline-none
+                                    }, children: 'Global (All Organizations)' })] })] })), (0, jsx_runtime_1.jsx)("div", { style: { paddingRight: 25 }, children: (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: () => {
+                            const { xAxisField, xAxisLabel, xAxisFormat, chartName, chartType, dashboardName, dateFieldTable, dateField, template, } = chartConfig;
+                            if (isSubmitting === false) {
+                                editChart({
+                                    setIsSubmitting,
+                                    report,
+                                    values: {
+                                        xAxisField,
+                                        xAxisLabel,
+                                        xAxisFormat,
+                                        chartName,
+                                        chartType,
+                                        dashboardName,
+                                        dateFieldTable,
+                                        dateField,
+                                        template,
+                                    },
+                                    yAxisFields,
+                                    columns,
+                                    query,
+                                    buckets: bucketFields,
+                                    showTableFormatOptions,
+                                });
+                            }
+                        }, label: report ? 'Save changes' : 'Add to dashboard' }) }), (0, jsx_runtime_1.jsx)("div", { style: { height: 20 } })] }) }));
 }
 //# sourceMappingURL=AddToDashboardModal.js.map