@quillsql/react 2.8.5 → 2.8.7

package/dist/AddToDashboardModal.js

@@ -1,43 +1,14 @@
-"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 = exports.ChartForm = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // @ts-nocheck
-const react_1 = __importStar(require("react"));
-const date_fns_1 = require("date-fns");
-const dataFetcher_1 = require("./utils/dataFetcher");
-const Context_1 = require("./Context");
-const date_fns_2 = require("date-fns");
-const Chart_1 = __importDefault(require("./Chart"));
-const ReportBuilder_1 = require("./ReportBuilder");
-const aggregate_1 = require("./utils/aggregate");
-const assets_1 = require("./assets");
+import React, { useContext, useEffect, useState } from 'react';
+import { sub, startOfToday } from 'date-fns';
+import { getData, getDataFromCloud } from './utils/dataFetcher';
+import { ClientContext, SchemaContext, ThemeContext, DateFilterContext, DashboardContext, DashboardFiltersContext, } from './Context';
+import { differenceInDays, differenceInHours, differenceInMonths, differenceInYears, startOfDay, startOfHour, startOfMonth, startOfYear, } from 'date-fns';
+import Chart from './Chart';
+import { getPostgresBasicType } from './ReportBuilder';
+import { aggregate } from './utils/aggregate';
+import { ArrowDownHeadIcon } from './assets';
 function convertPostgresColumn(column) {
     let format;
     switch (column.dataTypeID) {
@@ -83,7 +54,7 @@ function updateLabels(yAxisFields, values) {
     });
 }
 const DefaultSelectComponent = function DefaultSelect({ onChange, value, options, form, field, theme, }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative' }, children: [(0, jsx_runtime_1.jsx)("select", { onChange: event => onChange(event.target.value), value: value, id: 'reportbuilderdropdown', style: {
+    return (_jsxs("div", { style: { position: 'relative' }, children: [_jsx("select", { onChange: event => onChange(event.target.value), value: value, id: 'reportbuilderdropdown', style: {
                     width: 200,
                     outline: 'none',
                     textAlign: 'left',
@@ -102,7 +73,7 @@ const DefaultSelectComponent = function DefaultSelect({ onChange, value, options
                     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))) }), (0, jsx_runtime_1.jsx)(assets_1.ArrowDownHeadIcon, { style: {
+                }, children: options.map((option, index) => (_jsx("option", { value: option.value, children: option.label }, option.label + index))) }), _jsx(ArrowDownHeadIcon, { style: {
                     height: '20px',
                     width: '20px',
                     flex: 'none',
@@ -112,9 +83,9 @@ const DefaultSelectComponent = function DefaultSelect({ onChange, value, options
                     color: theme?.secondaryTextColor,
                 }, "aria-hidden": "true" })] }));
 };
-const MemoizedDefaultSelectComponent = react_1.default.memo(DefaultSelectComponent);
+const MemoizedDefaultSelectComponent = React.memo(DefaultSelectComponent);
 const DefaultTextInputComponent = function DefaultText({ onChange, value, id, theme, placeholder, }) {
-    return ((0, jsx_runtime_1.jsx)("input", { style: {
+    return (_jsx("input", { style: {
             outline: 'none',
             textAlign: 'left',
             whiteSpace: 'nowrap',
@@ -138,21 +109,21 @@ const DefaultTextInputComponent = function DefaultText({ onChange, value, id, th
             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 MemoizedDefaultTextInputComponent = React.memo(DefaultTextInputComponent);
+export default 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] = useContext(ThemeContext);
+    const [client] = useContext(ClientContext);
+    const [schema, setSchema] = useContext(SchemaContext);
     // const [organization, setOrganization] = useState([]);
-    const { dispatch } = (0, react_1.useContext)(Context_1.DashboardContext);
+    const { dispatch } = useContext(DashboardContext);
     // showTableFormatOptions = false;
     // showDateFieldOptions = false;
     // showAccessControlOptions = false;3
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         let isSubscribed = true;
         async function getSchema() {
             if (!schema || !schema.length) {
-                const resp = await (0, dataFetcher_1.getDataFromCloud)(client, `schema2/${client.publicKey}/`, null, 'GET');
+                const resp = await getDataFromCloud(client, `schema2/${client.publicKey}/`, null, 'GET');
                 if (isSubscribed) {
                     setSchema(resp.tables);
                 }
@@ -347,7 +318,7 @@ function AddToDashboardModal({ isOpen, setIsOpen, SelectComponent, TextInputComp
                 customerId: customerId,
             }
             : { clientId: publicKey }).toString();
-        const resp = await (0, dataFetcher_1.getData)(client, `dashedit2?${searchParams}`, 'same-origin', hostedBody, cloudBody);
+        const resp = await getData(client, `dashedit2?${searchParams}`, 'same-origin', hostedBody, cloudBody);
         if (resp) {
             dispatch({
                 type: 'UPDATE_DASHBOARD_ITEM',
@@ -369,13 +340,12 @@ function AddToDashboardModal({ isOpen, setIsOpen, SelectComponent, TextInputComp
     };
     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, report: report, query: query, client: client, 
+    _jsx(_Fragment, { children: ModalComponent ? (_jsx(ModalComponent, { isOpen: isOpen, title: 'Add to dashboard', onClose: () => setIsOpen(false), children: _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, 
+                SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, formHeaderStyle: formHeaderStyle, formLabelStyle: formLabelStyle, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions, newFields: fields }) })) : (_jsx(QuillModal, { isOpen: isOpen, onClose: () => setIsOpen(false), title: 'Add to dashboard', children: _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, onClose, setIsOpen, title, children }) {
     const scrollPosition = 0;
     // useEffect(() => {
@@ -397,7 +367,7 @@ function QuillModal({ isOpen, onClose, setIsOpen, title, children }) {
     if (!isOpen) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { style: {
                     position: 'fixed',
                     top: '0',
                     right: '0',
@@ -406,7 +376,7 @@ function QuillModal({ isOpen, onClose, setIsOpen, title, children }) {
                     zIndex: '50',
                     backgroundColor: 'rgba(255, 255, 255, 0.8)',
                     backdropFilter: 'blur(5px)',
-                }, onClick: onClose }), (0, jsx_runtime_1.jsx)("div", { style: {
+                }, onClick: onClose }), _jsx("div", { style: {
                     // position: "absolute",
                     position: 'fixed',
                     left: '50%',
@@ -426,7 +396,7 @@ function QuillModal({ isOpen, onClose, setIsOpen, title, children }) {
                     borderColor: '#e7e7e7',
                     overflow: 'hidden',
                     // zIndex: 1000,
-                }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                }, children: _jsxs("div", { style: {
                         // width: "80%",
                         maxHeight: '90vh',
                         overflowY: 'scroll',
@@ -437,7 +407,7 @@ function QuillModal({ isOpen, onClose, setIsOpen, title, children }) {
                         display: 'flex',
                         flexDirection: 'column',
                         alignItems: 'center',
-                    }, children: [(0, jsx_runtime_1.jsx)("h2", { style: {
+                    }, children: [_jsx("h2", { style: {
                                 marginLeft: 35,
                                 marginTop: 25,
                                 fontSize: 18,
@@ -446,7 +416,7 @@ function QuillModal({ isOpen, onClose, setIsOpen, title, children }) {
                                 textAlign: 'left',
                             }, children: title }), children] }) })] }));
 }
-function ChartForm({ data, fields, theme, saveVisualization, report, editChart, schema, query, organizationName, SelectComponent, TextInputComponent, client, ButtonComponent, SecondaryButtonComponent, formHeaderStyle, formLabelStyle, showTableFormatOptions, showDateFieldOptions, showAccessControlOptions, newFields, }) {
+export 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;
     }
@@ -461,16 +431,16 @@ function ChartForm({ data, fields, theme, saveVisualization, report, editChart,
         }));
     const xAxisOptions = data?.length
         ? 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')
+            .filter(option => getPostgresBasicType(newFields.find(field => field.name === option)) === 'date' ||
+            getPostgresBasicType(newFields.find(field => field.name === option)) === 'string')
             .map(field => ({
             value: field,
             label: field,
         }))
         : fields
             .filter(option => {
-            return ((0, ReportBuilder_1.getPostgresBasicType)(newFields.find(field => field.name === option.field)) === 'date' ||
-                (0, ReportBuilder_1.getPostgresBasicType)(newFields.find(field => field.name === option.field)) === 'string');
+            return (getPostgresBasicType(newFields.find(field => field.name === option.field)) === 'date' ||
+                getPostgresBasicType(newFields.find(field => field.name === option.field)) === 'string');
         })
             .map(field => ({
             value: field.field,
@@ -478,22 +448,22 @@ function ChartForm({ data, fields, theme, saveVisualization, report, editChart,
         }));
     const yAxisOptions = data?.length
         ? Object.keys(data[0])
-            .filter(option => (0, ReportBuilder_1.getPostgresBasicType)(newFields.find(field => field.name === option)) === 'number')
+            .filter(option => getPostgresBasicType(newFields.find(field => field.name === option)) === 'number')
             .map(field => ({
             value: field,
             label: field,
         }))
         : fields
             .filter(option => {
-            return ((0, ReportBuilder_1.getPostgresBasicType)(newFields.find(field => field.name === option.field)) === 'number');
+            return (getPostgresBasicType(newFields.find(field => field.name === option.field)) === 'number');
         })
             .map(field => ({
             value: field.field,
             label: field.field,
         }));
-    const [dateFieldOptions, setDateFieldOptions] = (0, react_1.useState)([]);
-    const [formValues, setFormValues] = (0, react_1.useState)({});
-    (0, react_1.useEffect)(() => {
+    const [dateFieldOptions, setDateFieldOptions] = useState([]);
+    const [formValues, setFormValues] = useState({});
+    useEffect(() => {
         const fetchReferencedTables = async () => {
             if (!query) {
                 return;
@@ -503,7 +473,7 @@ function ChartForm({ data, fields, theme, saveVisualization, report, editChart,
         };
         fetchReferencedTables();
     }, [query, schema]);
-    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
+    return (_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) {
@@ -513,14 +483,14 @@ function ChartForm({ data, fields, theme, saveVisualization, report, editChart,
                     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 }));
+                return (_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: {
+                return (_jsx("div", { style: {
                         height: 38,
                         background: theme.primaryButtonColor,
                         color: theme.backgroundColor,
@@ -538,7 +508,7 @@ function ChartForm({ data, fields, theme, saveVisualization, report, editChart,
             }, SecondaryButtonComponent: ButtonComponent
             ? ButtonComponent
             : ({ onClick, label }) => {
-                return ((0, jsx_runtime_1.jsx)("div", { style: {
+                return (_jsx("div", { style: {
                         height: 38,
                         background: theme.backgroundColor,
                         borderWidth: theme.borderWidth,
@@ -556,65 +526,61 @@ function ChartForm({ data, fields, theme, saveVisualization, report, editChart,
                     }, onClick: onClick, children: label }));
             }, formHeaderStyle: formHeaderStyle, formLabelStyle: formLabelStyle }));
 }
-exports.ChartForm = ChartForm;
-function isValidDate(d) {
+export function isValidDate(d) {
     return d instanceof Date && !isNaN(d);
 }
-exports.isValidDate = isValidDate;
-const isArrayOfValidDates = (arr, field) => arr.every(d => new Date(d[field]) instanceof Date && !isNaN(new Date(d[field])));
-exports.isArrayOfValidDates = isArrayOfValidDates;
-function formatDateBuckets(startDate, endDate) {
+export const isArrayOfValidDates = (arr, field) => arr.every(d => new Date(d[field]) instanceof Date && !isNaN(new Date(d[field])));
+export function formatDateBuckets(startDate, endDate) {
     // Calculate the distance in hours
-    const distanceInHours = Math.abs((0, date_fns_2.differenceInHours)(endDate, startDate));
+    const distanceInHours = Math.abs(differenceInHours(endDate, startDate));
     // Check if the distance is less than or equal to one hour
     if (distanceInHours <= 1) {
         return {
             unit: 'hour',
             format: 'h a',
-            startOf: date_fns_2.startOfHour,
+            startOf: startOfHour,
         };
     }
     // Calculate the distance in days
-    const distanceInDays = Math.abs((0, date_fns_2.differenceInDays)(endDate, startDate));
+    const distanceInDays = Math.abs(differenceInDays(endDate, startDate));
     // Check if the distance is less than or equal to one day
     if (distanceInDays <= 1) {
         return {
             unit: 'day',
             format: 'MMM d',
-            startOf: date_fns_2.startOfDay,
+            startOf: startOfDay,
         };
     }
     // Calculate the distance in months
-    const distanceInMonths = Math.abs((0, date_fns_2.differenceInMonths)(endDate, startDate));
+    const distanceInMonths = Math.abs(differenceInMonths(endDate, startDate));
     // Check if the distance is less than or equal to one month
     if (distanceInMonths <= 1) {
         return {
             unit: 'month',
             format: 'MMM yyyy',
-            startOf: date_fns_2.startOfMonth,
+            startOf: startOfMonth,
         };
     }
     // Calculate the distance in years
-    const distanceInYears = Math.abs((0, date_fns_2.differenceInYears)(endDate, startDate));
+    const distanceInYears = Math.abs(differenceInYears(endDate, startDate));
     // Check if the distance is less than or equal to one year
     if (distanceInYears <= 1) {
         return {
             unit: 'year',
             format: 'yyyy',
-            startOf: date_fns_2.startOfYear,
+            startOf: startOfYear,
         };
     }
     // Otherwise, the distance is more than one year
     return {
         unit: 'year',
         format: 'yyyy',
-        startOf: date_fns_2.startOfYear,
+        startOf: startOfYear,
     };
 }
-exports.formatDateBuckets = formatDateBuckets;
 const FormTextInput = ({ field, form, ...props }) => {
     const { theme, wider } = props;
-    return ((0, jsx_runtime_1.jsx)("input", { className: `px-[12px] text-sm h-[38px] py-1.5 shadow-sm w-[245px] border-[#E7E7E7] ${'text-[#212121]'} border-[1px] bg-[white] rounded-md`, type: "text", ...field, ...props }));
+    return (_jsx("input", { className: `px-[12px] text-sm h-[38px] py-1.5 shadow-sm w-[245px] border-[#E7E7E7] ${'text-[#212121]'} border-[1px] bg-[white] rounded-md`, type: "text", ...field, ...props }));
 };
 const POSTGRES_DATE_TYPES = [
     'timestamp',
@@ -627,7 +593,7 @@ async function getReferencedTables(client, sqlQuery, dbTables) {
     //   const parser = new Parser();
     const tables = [];
     const withAliases = [];
-    const resp = await (0, dataFetcher_1.getDataFromCloud)(client, `astify`, { query: sqlQuery });
+    const resp = await getDataFromCloud(client, `astify`, { query: sqlQuery });
     let ast = resp.ast;
     ast = ast.length ? ast[0] : ast;
     if (ast.with && ast.with.length) {
@@ -678,7 +644,7 @@ const Y_FORMAT_OPTIONS = [
     { value: 'string', label: 'string' },
 ];
 const handleBucketData = (dashboardItem, bucketFields, dateFilter) => {
-    return (0, aggregate_1.aggregate)(dashboardItem, bucketFields, dateFilter);
+    return 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) => {
@@ -701,24 +667,24 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
             return 1;
         return 0;
     });
-    const { dashboardFilters, dashboardFiltersDispatch } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
-    const [rows, setRows] = (0, react_1.useState)(null);
-    const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
-    const [xAxisField, setXAxisField] = (0, react_1.useState)(report?.xAxisField ||
+    const { dashboardFilters, dashboardFiltersDispatch } = useContext(DashboardFiltersContext);
+    const [rows, setRows] = useState(null);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [xAxisField, setXAxisField] = useState(report?.xAxisField ||
         (xAxisOptions && xAxisOptions.length && xAxisOptions[0].value) ||
         '');
-    const [xAxisLabel, setXAxisLabel] = (0, react_1.useState)(report?.xAxisLabel || '');
-    const [xAxisFormat, setXAxisFormat] = (0, react_1.useState)(report?.xAxisFormat ||
+    const [xAxisLabel, setXAxisLabel] = useState(report?.xAxisLabel || '');
+    const [xAxisFormat, setXAxisFormat] = useState(report?.xAxisFormat ||
         (X_FORMAT_OPTIONS.length && 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, setDateFilter } = (0, react_1.useContext)(Context_1.DateFilterContext);
-    const [yAxisFields, setYAxisFields] = (0, react_1.useState)(report
+    const [chartName, setChartName] = useState(report?.name || '');
+    const [chartType, setChartType] = useState(report?.chartType || 'column');
+    const [dateFieldTable, setDateFieldTable] = useState((dateFieldOptions.length && dateFieldOptions[0].name) || '');
+    const [dateField, setDateField] = useState((dateFieldOptions.length && dateFieldOptions[0].columns[0].name) || '');
+    const [template, setTemplate] = useState(report?.template || false);
+    const [chartConfig, setChartConfig] = useState({});
+    const { dateFilter, setDateFilter } = useContext(DateFilterContext);
+    const [yAxisFields, setYAxisFields] = useState(report
         ? report.yAxisFields
         : [
             {
@@ -729,8 +695,8 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
                 format: 'whole_number',
             },
         ]);
-    const [bucketFields, setBucketFields] = (0, react_1.useState)((report && report.buckets) || []);
-    const [columns, setColumns] = (0, react_1.useState)(report && report.columns.length
+    const [bucketFields, setBucketFields] = useState((report && report.buckets) || []);
+    const [columns, setColumns] = useState(report && report.columns.length
         ? report.columns
         : fields?.length
             ? fields.map(field => convertPostgresColumn(field))
@@ -785,7 +751,7 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
         ]);
     };
     const handleAddBucket = () => {
-        const bucketPossibilities = xAxisOptions.filter(option => (0, ReportBuilder_1.getPostgresBasicType)(newFields.find(field => field.name === option.value)) === 'date');
+        const bucketPossibilities = xAxisOptions.filter(option => getPostgresBasicType(newFields.find(field => field.name === option.value)) === 'date');
         if (!bucketPossibilities.length) {
             alert('No possible buckets');
             return;
@@ -801,12 +767,12 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
             setXAxisFormat('dynamic');
         }
         else {
-            setXAxisFormat(postgresFormatMap((0, ReportBuilder_1.getPostgresBasicType)(newFields.find(field => field.name === bucketPossibilities[0].value))));
+            setXAxisFormat(postgresFormatMap(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]);
-    (0, react_1.useEffect)(() => {
+    const [dashboardOptions, setDashboardOptions] = useState([]);
+    const [dashboardName, setDashboardName] = useState(report?.dashboardName || dashboardOptions[0]);
+    useEffect(() => {
         if (!report && dashboardOptions && dashboardOptions.length) {
             setDashboardName(dashboardOptions[0].value);
         }
@@ -821,8 +787,8 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
         dateFieldTable,
         dateField,
     };
-    const [selectedTabIndex, setSelectedTabIndex] = (0, react_1.useState)(report && report.template ? 1 : 0);
-    react_1.default.useEffect(() => {
+    const [selectedTabIndex, setSelectedTabIndex] = useState(report && report.template ? 1 : 0);
+    React.useEffect(() => {
         async function getDashboards() {
             const { publicKey, customerId, queryEndpoint } = client;
             if (customerId || queryEndpoint) {
@@ -839,16 +805,16 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
                             ? { orgId: customerId, name, task: 'config' }
                             : { name: dashboardName, task: 'config' },
                     };
-                    const resp = await (0, dataFetcher_1.getData)(client, `dashconfig?${searchParams}`, 'omit', hostedBody, null, 'GET');
+                    const resp = await getData(client, `dashconfig?${searchParams}`, 'omit', hostedBody, null, 'GET');
                     const bigFilterObj = {};
                     if (resp.dateFilter && Object.keys(resp.dateFilter).length) {
                         if (resp.dateFilter.initialRange === 'LAST_90_DAYS') {
                             const filter = {
-                                startDate: (0, date_fns_1.sub)((0, date_fns_1.startOfToday)(), { days: 90 }),
+                                startDate: sub(startOfToday(), { days: 90 }),
                                 endDate: new Date(),
                                 filterType: 'date_range',
                                 selectedValue: [
-                                    (0, date_fns_1.sub)((0, date_fns_1.startOfToday)(), { days: 90 }),
+                                    sub(startOfToday(), { days: 90 }),
                                     new Date(),
                                     '90d',
                                 ],
@@ -867,11 +833,11 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
                         }
                         else if (resp.dateFilter.initialRange === 'LAST_30_DAYS') {
                             const filter = {
-                                startDate: (0, date_fns_1.sub)((0, date_fns_1.startOfToday)(), { days: 30 }),
+                                startDate: sub(startOfToday(), { days: 30 }),
                                 endDate: new Date(),
                                 filterType: 'date_range',
                                 selectedValue: [
-                                    (0, date_fns_1.sub)((0, date_fns_1.startOfToday)(), { days: 30 }),
+                                    sub(startOfToday(), { days: 30 }),
                                     new Date(),
                                     't',
                                 ],
@@ -892,10 +858,10 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
                         }
                         else if (resp.dateFilter.initialRange === 'CURRENT_MONTH') {
                             const filter = {
-                                startDate: (0, date_fns_2.startOfMonth)(new Date()),
+                                startDate: startOfMonth(new Date()),
                                 endDate: new Date(),
                                 filterType: 'date_range',
-                                selectedValue: [(0, date_fns_2.startOfMonth)(new Date()), new Date(), 'm'],
+                                selectedValue: [startOfMonth(new Date()), new Date(), 'm'],
                                 options: options,
                                 field: 'date_range',
                                 label: 'Date',
@@ -912,11 +878,11 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
                         }
                         else {
                             const filter = {
-                                startDate: (0, date_fns_1.sub)((0, date_fns_1.startOfToday)(), { days: 90 }),
+                                startDate: sub(startOfToday(), { days: 90 }),
                                 endDate: new Date(),
                                 filterType: 'date_range',
                                 selectedValue: [
-                                    (0, date_fns_1.sub)((0, date_fns_1.startOfToday)(), { days: 90 }),
+                                    sub(startOfToday(), { days: 90 }),
                                     new Date(),
                                     '90d',
                                 ],
@@ -959,16 +925,16 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
         }
         getDashboards();
     }, [dashboardName, client]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         async function getDashNames() {
-            const resp = await (0, dataFetcher_1.getDataFromCloud)(client, `dashnames/${client.publicKey}/`, null, 'GET');
+            const resp = await getDataFromCloud(client, `dashnames/${client.publicKey}/`, null, 'GET');
             setDashboardOptions(resp.dashboardNames
                 .filter(elem => elem !== null)
                 .map(key => ({ label: key, value: key })));
         }
         getDashNames();
     }, []);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         // if (!dateField) {
         //   return;
         // }
@@ -986,7 +952,7 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
             return;
         }
     }, [chartType, dateField]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (dateFieldOptions.length) {
             setDateFieldTable(dateFieldOptions[0].name);
             setDateField(dateFieldOptions[0].columns[0].name);
@@ -1012,7 +978,7 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
             setXAxisFormat('dynamic');
         }
         else {
-            setXAxisFormat(postgresFormatMap((0, ReportBuilder_1.getPostgresBasicType)(newFields.find(field => field.name === value))));
+            setXAxisFormat(postgresFormatMap(getPostgresBasicType(newFields.find(field => field.name === value))));
         }
     };
     const handleXAxisFieldChange = value => {
@@ -1030,7 +996,7 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
             setXAxisFormat('dynamic');
         }
         else {
-            setXAxisFormat(postgresFormatMap((0, ReportBuilder_1.getPostgresBasicType)(newFields.find(field => field.name === value))));
+            setXAxisFormat(postgresFormatMap(getPostgresBasicType(newFields.find(field => field.name === value))));
         }
         if (bucketFields.length > 0) {
             const newBucketFields = [...bucketFields];
@@ -1072,7 +1038,7 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
         newColumns[index] = { ...newColumns[index], label: value };
         setColumns(newColumns);
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         const now = new Date();
         if (!dateFilter ||
             (dateFilter && dateFilter.startDate && dateFilter.endDate)) {
@@ -1107,15 +1073,15 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
         columns,
         dateFilter,
     ]);
-    return ((0, jsx_runtime_1.jsx)("div", { style: { display: 'inline-block' }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+    return (_jsx("div", { style: { display: 'inline-block' }, children: _jsxs("div", { style: {
                 display: 'flex',
                 flexDirection: 'column',
                 paddingLeft: 25,
                 paddingRight: chartConfig.chartType === 'pie' ? 25 : undefined,
-            }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+            }, children: [_jsxs("div", { style: {
                         display: 'flex',
                         flexDirection: 'column',
-                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: { height: 20 } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    }, children: [_jsx("div", { style: { height: 20 } }), _jsx("div", { style: {
                                 marginRight: chartConfig.chartType === 'pie' ||
                                     chartConfig.chartType === 'table'
                                     ? undefined
@@ -1124,36 +1090,36 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
                                     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: {
+                            }, children: Object.keys(chartConfig).length > 0 && (_jsx(Chart, { 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)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { style: formHeaderStyle || {
+                                } })) }), _jsx("div", { style: { height: 40 } }), showTableFormatOptions || showDateFieldOptions ? (_jsx(_Fragment, { children: _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: {
+                                }, children: 'Chart' }) })) : null, _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 || {
+                            }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', marginTop: 8 }, children: [_jsx("div", { style: formLabelStyle || {
                                                 color: theme.secondaryTextColor,
                                                 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 || {
+                                            }, children: "Name" }), _jsx("div", { style: { minWidth: 200, marginTop: 6 }, children: _jsx(TextInputComponent, { onChange: e => setChartName(e.target.value), value: chartName, theme: theme, placeholder: 'Enter a chart name' }) })] }), _jsx("div", { style: { width: 20 } }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', marginTop: 8 }, children: [_jsx("div", { style: formLabelStyle || {
                                                 color: theme.secondaryTextColor,
                                                 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 || {
+                                            }, children: "Dashboard name" }), _jsx("div", { style: { minWidth: 200, marginTop: 6 }, children: _jsx(SelectComponent, { onChange: value => setDashboardName(value), value: dashboardName, theme: theme, options: dashboardOptions }) })] }), _jsx("div", { style: { width: 20 } }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', marginTop: 8 }, children: [_jsx("div", { style: formLabelStyle || {
                                                 color: theme.secondaryTextColor,
                                                 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: [
+                                            }, children: "Chart type" }), _jsx("div", { style: { minWidth: 200, marginTop: 6 }, children: _jsx(SelectComponent, { onChange: e => setChartType(e), value: chartType, options: [
                                                     { label: 'column', value: 'column' },
                                                     { label: 'bar', value: 'bar' },
                                                     { label: 'line', value: 'line' },
@@ -1162,29 +1128,29 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
                                                     { label: 'table', value: 'table' },
                                                 ], theme: theme }) })] })] })] }), chartType !== 'table' &&
                     chartType !== 'metric' &&
-                    chartType !== 'pie' && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                    chartType !== 'pie' && (_jsxs("div", { style: {
                         display: 'flex',
                         flexDirection: 'column',
                         marginTop: 20,
                         maxWidth: 200,
-                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
+                    }, children: [_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: {
+                            }, children: "Buckets" }), _jsx("div", { style: {
                                 maxWidth: 200,
                                 // marginTop: 6,
                                 display: 'flex',
                                 flexDirection: 'column',
-                            }, children: bucketFields.map((bucketField, index) => ((0, jsx_runtime_1.jsxs)("div", { style: {
+                            }, children: bucketFields.map((bucketField, index) => (_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, 
+                                }, children: [_jsx("div", { style: { minWidth: 200 }, children: _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: {
+                                            options: xAxisOptions, theme: theme }) }), _jsx("div", { onClick: () => handleDeleteBucketField(index), style: {
                                             cursor: 'pointer',
                                             paddingLeft: 6,
                                             paddingTop: 9,
@@ -1194,28 +1160,28 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
                                             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: {
+                                        }, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: theme?.secondaryTextColor, height: "20", width: "20", children: _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 && (_jsx("div", { style: { marginTop: 12 }, children: _jsx(SecondaryButtonComponent, { onClick: handleAddBucket, label: "Add bucket +" }) }))] })), _jsx("div", { style: {
                         display: 'flex',
                         flexDirection: 'row',
                         alignItems: 'center',
                         // justifyContent: 'space-between',
                         marginTop: 20,
-                    }, children: chartType !== 'table' && ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
+                    }, children: chartType !== 'table' && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx("div", { style: formLabelStyle || {
                                     color: theme.secondaryTextColor,
                                     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: {
+                                }, children: chartType === 'pie' ? 'Category column' : 'x-axis column' }), _jsx("div", { style: { height: 6 } }), _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)(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: {
+                                }, children: [_jsx("div", { style: { minWidth: 200 }, children: _jsx(SelectComponent, { onChange: e => handleXAxisFieldChange(e), value: xAxisField, options: xAxisOptions, theme: theme }) }), _jsx("div", { style: { width: 20 } }), _jsx("div", { style: { minWidth: 200 }, children: _jsx(TextInputComponent, { onChange: e => setXAxisLabel(e.target.value), value: xAxisLabel, theme: theme, placeholder: 'Enter a label' }) }), _jsx("div", { style: { width: 20 } }), _jsx("div", { style: { minWidth: 200 }, children: _jsx(SelectComponent, { onChange: e => setXAxisFormat(e), value: xAxisFormat, options: X_FORMAT_OPTIONS, theme: theme }) })] })] })) }), _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 || {
+                    }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx("div", { style: formLabelStyle || {
                                         color: theme.secondaryTextColor,
                                         fontFamily: theme?.fontFamily,
                                         fontSize: theme?.fontSize || '14px',
@@ -1224,32 +1190,32 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
                                         ? 'Columns'
                                         : chartType === 'pie'
                                             ? 'Quantity column'
-                                            : 'y-axis columns' }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                            : 'y-axis columns' }), _jsxs("div", { style: {
                                         display: 'flex',
                                         flexDirection: 'column',
-                                    }, children: [yAxisFields.map((yAxisField, index) => ((0, jsx_runtime_1.jsx)("div", { style: {
+                                    }, children: [yAxisFields.map((yAxisField, index) => (_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, { onChange: option => handleYAxisFieldChange(index, option), value: yAxisField.field, options: chartType === 'table' ? fieldOptions : 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: {
+                                            }, children: _jsx("div", { style: { minWidth: 200 }, children: _jsx(SelectComponent, { onChange: option => handleYAxisFieldChange(index, option), value: yAxisField.field, options: chartType === 'table' ? fieldOptions : yAxisOptions, theme: theme }) }) }, `yAxisField-${index}`))), chartType !== 'pie' && (_jsx("div", { style: { marginTop: 12 }, children: _jsx(SecondaryButtonComponent, { onClick: handleAddYAxisField, label: "Add column +" }) })), _jsx("div", { style: { height: 10 } })] })] }), _jsx("div", { style: { width: 20 } }), _jsxs("div", { style: {
                                 display: 'flex',
                                 flexDirection: 'column',
                                 justifyContent: 'flex-start',
-                            }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
+                            }, children: [_jsx("div", { style: formLabelStyle || {
                                         color: 'transparent',
                                         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: {
+                                    yAxisFields.map((yAxisField, index) => (_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, { value: yAxisFields[index].label, onChange: e => {
+                                        }, children: [_jsx("div", { style: { minWidth: 200 }, children: _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: {
+                                                    }, theme: theme, placeholder: 'Enter a label' }) }), _jsx("div", { style: { width: 20 } }), _jsx("div", { style: { minWidth: 200 }, children: _jsx(SelectComponent, { onChange: value => handleYAxisFieldFormatChange(index, value), value: yAxisField.format, options: Y_FORMAT_OPTIONS, theme: theme }) }), _jsx("div", { onClick: () => index > 0 ? handleDeleteYAxisField(index) : undefined, style: {
                                                     cursor: index > 0 ? 'pointer' : undefined,
                                                     paddingLeft: 6,
                                                     paddingTop: 12,
@@ -1259,68 +1225,68 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
                                                     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.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: formHeaderStyle || {
+                                                }, children: _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: _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}`)))] })] }), _jsx("div", { style: { height: 20 } }), showTableFormatOptions && (_jsxs(_Fragment, { children: [_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 && chartType !== 'table' && ((0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
+                            }, children: 'Table' }), _jsx("div", { style: { height: 8 } })] })), showTableFormatOptions && chartType !== 'table' && (_jsx("div", { style: formLabelStyle || {
                         color: theme.secondaryTextColor,
                         fontFamily: theme?.fontFamily,
                         fontSize: theme?.fontSize || '14px',
                         fontWeight: theme.labelFontWeight || '600',
-                    }, children: 'Columns' })), showTableFormatOptions && chartType !== 'table' && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                    }, children: 'Columns' })), showTableFormatOptions && chartType !== 'table' && (_jsxs("div", { style: {
                         display: 'flex',
                         flexDirection: 'row',
                         alignItems: 'flex-start',
                         marginTop: 6,
                         // justifyContent: 'space-between',
                         // marginTop: 8,
-                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column' }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                    }, children: [_jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: _jsxs("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'column',
-                                }, children: [columns.map((yAxisField, index) => ((0, jsx_runtime_1.jsx)("div", { style: {
+                                }, children: [columns.map((yAxisField, index) => (_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 => {
+                                        }, children: _jsx("div", { style: { minWidth: 200 }, children: _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: {
+                                                }, options: fieldOptions, theme: theme }) }) }, `column-${index}`))), _jsx("div", { style: { height: 10 } })] }) }), _jsx("div", { style: { width: 20 } }), _jsx("div", { style: {
                                 display: 'flex',
                                 flexDirection: 'column',
                                 justifyContent: 'flex-start',
-                            }, children: columns.map((yAxisField, index) => ((0, jsx_runtime_1.jsxs)("div", { style: {
+                            }, children: columns.map((yAxisField, index) => (_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 || {
+                                }, children: [_jsx("div", { style: { minWidth: 200 }, children: _jsx(TextInputComponent, { theme: theme, placeholder: "Enter column label", value: yAxisField.label, onChange: event => handleColumnLabelChange(index, event.target.value) }) }), _jsx("div", { style: { width: 20 } }), _jsx("div", { style: { minWidth: 200 }, children: _jsx(SelectComponent, { value: yAxisField.format, onChange: option => handleColumnFormatChange(index, option), options: Y_FORMAT_OPTIONS, theme: theme }) })] }, `column-${index}`))) })] })), showDateFieldOptions && _jsx("div", { style: { height: 20 } }), showDateFieldOptions && (_jsxs(_Fragment, { children: [_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: {
+                            }, children: 'Filters' }), _jsx("div", { style: { height: 8 } })] })), showDateFieldOptions && (_jsxs("div", { style: {
                         display: 'flex',
                         flexDirection: 'row',
                         alignItems: 'center',
-                    }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("div", { style: formLabelStyle || {
+                    }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx("div", { style: formLabelStyle || {
                                         color: theme.secondaryTextColor,
                                         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
+                                    }, children: "Date field table" }), _jsx("div", { style: { minWidth: 200, marginTop: 6 }, children: _jsx(SelectComponent, { options: !dateFieldOptions.length
                                             ? [{ label: '', value: '' }]
                                             : dateFieldOptions.map(elem => {
                                                 return { label: elem.name, value: elem.name };
-                                            }), 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 || {
+                                            }), onChange: e => setDateFieldTable(e), value: dateFieldTable, theme: theme }) })] }), _jsx("div", { style: { width: 20 } }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx("div", { style: formLabelStyle || {
                                         color: theme.secondaryTextColor,
                                         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
+                                    }, children: "Date field" }), _jsx("div", { style: { minWidth: 200, marginTop: 6 }, children: _jsx(SelectComponent, { options: !dateFieldOptions.length
                                             ? [{ label: '', value: '' }]
                                             : dateFieldOptions.filter(elem => elem.name === dateFieldTable // Replace `values.dateFieldTable` with your state variable or prop
                                             ).length
@@ -1329,17 +1295,17 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
                                                     .columns.map(elem => {
                                                     return { label: elem.name, value: elem.name };
                                                 })
-                                                : [{ label: '', value: '' }], onChange: value => setDateField(value), value: dateField, theme: theme }) })] })] })), showAccessControlOptions && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                                : [{ label: '', value: '' }], onChange: value => setDateField(value), value: dateField, theme: theme }) })] })] })), showAccessControlOptions && (_jsxs("div", { style: {
                         display: 'flex',
                         flexDirection: 'column',
                         marginTop: 40,
                         marginBottom: 40,
-                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                    }, children: [_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: {
+                            }, children: 'Access Control' }), _jsx("div", { style: { height: 12 } }), _jsxs("div", { style: {
                                 padding: '1px',
                                 display: 'flex',
                                 flexDirection: 'row',
@@ -1350,7 +1316,7 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
                                 color: '#212121',
                                 backgroundColor: 'rgba(33, 33, 33, 0.03)',
                                 borderRadius: '6px',
-                            }, children: [(0, jsx_runtime_1.jsx)("div", { onClick: () => {
+                            }, children: [_jsx("div", { onClick: () => {
                                         setSelectedTabIndex(0);
                                         setTemplate(false);
                                     }, style: {
@@ -1377,7 +1343,7 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
                                             ? '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)'
                                             : undefined, // Shadow when selected
                                         outline: 'none', // focus:outline-none
-                                    }, children: `This Organization${organizationName ? ` (${organizationName})` : ``}` }), (0, jsx_runtime_1.jsx)("div", { onClick: () => {
+                                    }, children: `This Organization${organizationName ? ` (${organizationName})` : ``}` }), _jsx("div", { onClick: () => {
                                         setSelectedTabIndex(1);
                                         setTemplate(true);
                                     }, style: {
@@ -1404,7 +1370,7 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
                                             ? '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)'
                                             : undefined, // Shadow when selected
                                         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: () => {
+                                    }, children: 'Global (All Organizations)' })] })] })), _jsx("div", { style: { paddingRight: 25 }, children: _jsx(ButtonComponent, { onClick: () => {
                             const { xAxisField, xAxisLabel, xAxisFormat, chartName, chartType, dashboardName, dateFieldTable, dateField, template, } = chartConfig;
                             if (isSubmitting === false) {
                                 editChart({
@@ -1428,5 +1394,5 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
                                     showTableFormatOptions,
                                 });
                             }
-                        }, label: report ? 'Save changes' : 'Add to dashboard' }) }), (0, jsx_runtime_1.jsx)("div", { style: { height: 20 } })] }) }));
+                        }, label: report ? 'Save changes' : 'Add to dashboard' }) }), _jsx("div", { style: { height: 20 } })] }) }));
 }