@quillsql/react 2.3.1 → 2.3.2

package/lib/AddToDashboardModal.js

@@ -30,8 +30,9 @@ exports.formatDateBuckets = exports.isArrayOfValidDates = exports.isValidDate =
 const jsx_runtime_1 = require("react/jsx-runtime");
 // @ts-nocheck
 const react_1 = __importStar(require("react"));
-const Context_1 = require("./Context");
 const date_fns_1 = require("date-fns");
+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");
@@ -186,42 +187,6 @@ function AddToDashboardModal({ isOpen, setIsOpen, SelectComponent, TextInputComp
             isSubscribed = false;
         };
     }, [schema]);
-    // 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, chartName, chartType, xAxisField, xAxisFormat, dashboardName, dateFieldTable, dateField, template, } = values;
@@ -248,18 +213,12 @@ function AddToDashboardModal({ isOpen, setIsOpen, SelectComponent, TextInputComp
             return;
         }
         if (!columns.map((yAxisField, _) => yAxisField.label).every(Boolean) &&
-            showTableFormatOptions) {
+            showTableFormatOptions &&
+            chartType !== 'table') {
             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;
         }
@@ -273,26 +232,6 @@ function AddToDashboardModal({ isOpen, setIsOpen, SelectComponent, TextInputComp
         }
         let responseData;
         if (queryEndpoint) {
-            // response = await axios.post(
-            //   queryEndpoint,
-            //   {
-            //     metadata: {
-            //       name: chartName,
-            //       xAxisField,
-            //       yAxisFields,
-            //       xAxisLabel,
-            //       xAxisFormat,
-            //       yAxisLabel,
-            //       chartType,
-            //       dashboardName,
-            //       columns,
-            //       dateField: { table: dateFieldTable, field: dateField },
-            //       query: query,
-            //       task: 'create',
-            //     },
-            //   },
-            //   { headers: queryHeaders, withCredentials }
-            // );
             const url = queryEndpoint;
             const headers = {
                 'Content-Type': 'application/json',
@@ -339,14 +278,7 @@ function AddToDashboardModal({ isOpen, setIsOpen, SelectComponent, TextInputComp
                             dashboardName,
                             columns: showTableFormatOptions && chartType !== 'table'
                                 ? columns
-                                : [
-                                    ...yAxisFields,
-                                    {
-                                        field: xAxisField,
-                                        label: xAxisLabel,
-                                        format: xAxisFormat,
-                                    },
-                                ],
+                                : [...yAxisFields],
                             dateField: showDateFieldOptions
                                 ? { table: dateFieldTable, field: dateField }
                                 : defaultDateField,
@@ -405,28 +337,6 @@ function AddToDashboardModal({ isOpen, setIsOpen, SelectComponent, TextInputComp
             }
         }
         else {
-            // response = await axios.post(
-            //   `https://quill-344421.uc.r.appspot.com/dashedit/${publicKey}/${orgId}/`,
-            //   {
-            //     name: chartName,
-            //     xAxisField,
-            //     yAxisFields,
-            //     xAxisLabel,
-            //     xAxisFormat,
-            //     yAxisLabel,
-            //     chartType,
-            //     dashboardName,
-            //     columns,
-            //     dateField: { table: dateFieldTable, field: dateField },
-            //     query: query,
-            //   },
-            //   {
-            //     headers: {
-            //       Authorization: `Bearer ${authToken}`,
-            //       environment: environment || undefined,
-            //     },
-            //   }
-            // );
             const url = `https://quill-344421.uc.r.appspot.com/dashedit/${publicKey}/${customerId}/`;
             const headers = {
                 'Content-Type': 'application/json',
@@ -518,17 +428,7 @@ function AddToDashboardModal({ isOpen, setIsOpen, SelectComponent, TextInputComp
         if (!responseData) {
             return;
         }
-        // setDashboard((dashboard) => {
-        //   return {
-        //     ...dashboard,
-        //     [response.data._id]: { ...existingVisualization, ...response.data }
-        //   }
-        // })
-        // setIsOpen(false);
-        // 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, report: report, query: query, client: client, 
@@ -706,50 +606,50 @@ const isArrayOfValidDates = (arr, field) => arr.every(d => new Date(d[field]) in
 exports.isArrayOfValidDates = isArrayOfValidDates;
 function formatDateBuckets(startDate, endDate) {
     // Calculate the distance in hours
-    const distanceInHours = Math.abs((0, date_fns_1.differenceInHours)(endDate, startDate));
+    const distanceInHours = Math.abs((0, date_fns_2.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_1.startOfHour,
+            startOf: date_fns_2.startOfHour,
         };
     }
     // Calculate the distance in days
-    const distanceInDays = Math.abs((0, date_fns_1.differenceInDays)(endDate, startDate));
+    const distanceInDays = Math.abs((0, date_fns_2.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_1.startOfDay,
+            startOf: date_fns_2.startOfDay,
         };
     }
     // Calculate the distance in months
-    const distanceInMonths = Math.abs((0, date_fns_1.differenceInMonths)(endDate, startDate));
+    const distanceInMonths = Math.abs((0, date_fns_2.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_1.startOfMonth,
+            startOf: date_fns_2.startOfMonth,
         };
     }
     // Calculate the distance in years
-    const distanceInYears = Math.abs((0, date_fns_1.differenceInYears)(endDate, startDate));
+    const distanceInYears = Math.abs((0, date_fns_2.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_1.startOfYear,
+            startOf: date_fns_2.startOfYear,
         };
     }
     // Otherwise, the distance is more than one year
     return {
         unit: 'year',
         format: 'yyyy',
-        startOf: date_fns_1.startOfYear,
+        startOf: date_fns_2.startOfYear,
     };
 }
 exports.formatDateBuckets = formatDateBuckets;
@@ -826,7 +726,6 @@ const Y_FORMAT_OPTIONS = [
     { value: 'string', label: 'string' },
 ];
 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, }) {
@@ -835,6 +734,14 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
     //   if (b.value === 'created_at') return 1;
     //   return 0;
     // });
+    function postgresFormatMap(postgresType) {
+        if (postgresType === 'string')
+            return 'string';
+        if (postgresType === 'number')
+            return 'whole_number';
+        if (postgresType === 'date')
+            return 'dynamic';
+    }
     X_FORMAT_OPTIONS.sort((a, b) => {
         if (a.value === 'dynamic')
             return -1;
@@ -842,6 +749,7 @@ 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 { environment } = client;
@@ -854,7 +762,7 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
     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 { dateFilter, setDateFilter } = (0, react_1.useContext)(Context_1.DateFilterContext);
     const [yAxisFields, setYAxisFields] = (0, react_1.useState)(report
         ? report.yAxisFields
         : [
@@ -872,6 +780,49 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
         : fields?.length
             ? fields.map(field => convertPostgresColumn(field))
             : []);
+    function removeQuotes(str) {
+        if (str.startsWith('"') && str.endsWith('"')) {
+            return str.slice(1, -1);
+        }
+        else {
+            return str;
+        }
+    }
+    const processFilter = (filter, value = null) => {
+        //for dateObjects only, since values are arrays for dateObjects
+        const { selectedValue: _, ...filterWithoutSelectedValue } = filter; // _ is a throwaway variable
+        let selectedValue;
+        let selectedElem;
+        if (filter.filterType === 'string') {
+            selectedElem = filter.options.find(elem => elem[removeQuotes(filter.field)] === value);
+            if (selectedElem) {
+                selectedValue = selectedElem[removeQuotes(filter.field)];
+            }
+            return {
+                ...filterWithoutSelectedValue,
+                ...(selectedValue ? { selectedValue } : {}),
+            };
+        }
+        if (filter.filterType === 'date' || filter.filterType === 'date_range') {
+            if (value[2]) {
+                selectedElem = filter.options.find(elem => {
+                    return value[2] === elem[removeQuotes(filter.field)][2];
+                });
+                if (selectedElem) {
+                    selectedValue = selectedElem[removeQuotes(filter.field)];
+                }
+            }
+            return {
+                startDate: value ? value[0] : filter.startDate,
+                endDate: value ? value[1] : filter.endDate,
+                filterType: 'date_range',
+                ...(selectedValue ? { selectedValue } : {}),
+                field: 'date_range',
+                options: options,
+                label: 'Date',
+            };
+        }
+    };
     const handleAddYAxisField = () => {
         setYAxisFields([
             ...yAxisFields,
@@ -879,9 +830,7 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
         ]);
     };
     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');
+        const bucketPossibilities = xAxisOptions.filter(option => (0, ReportBuilder_1.getPostgresBasicType)(newFields.find(field => field.name === option.value)) === 'date');
         if (!bucketPossibilities.length) {
             alert('No possible buckets');
             return;
@@ -897,9 +846,7 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
             setXAxisFormat('dynamic');
         }
         else {
-            setXAxisFormat(
-            // whatIsProbablyTheType(data.slice(0, 10), bucketPossibilities[0].value)
-            (0, ReportBuilder_1.getPostgresBasicType)(newFields.find(field => field.name === bucketPossibilities[0].value)));
+            setXAxisFormat(postgresFormatMap((0, ReportBuilder_1.getPostgresBasicType)(newFields.find(field => field.name === bucketPossibilities[0].value))));
         }
     };
     const [dashboardOptions, setDashboardOptions] = (0, react_1.useState)([]);
@@ -914,12 +861,165 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
         dateFieldTable,
         dateField,
     };
-    const [selectedTabIndex, setSelectedTabIndex] = (0, react_1.useState)(values.template ? 1 : 0);
-    (0, react_1.useEffect)(() => {
-        if (dashboardOptions.length) {
-            setDashboardName(dashboardOptions[0].value);
+    const [selectedTabIndex, setSelectedTabIndex] = (0, react_1.useState)(report && report.template ? 1 : 0);
+    react_1.default.useEffect(() => {
+        async function getDashboards() {
+            const { publicKey, customerId, environment, queryEndpoint, queryHeaders, withCredentials, } = client;
+            if (customerId || queryEndpoint) {
+                try {
+                    let responseData;
+                    if (queryEndpoint) {
+                        const response = await fetch(queryEndpoint, {
+                            method: 'POST',
+                            headers: {
+                                ...queryHeaders,
+                                'Content-Type': 'application/json',
+                            },
+                            body: JSON.stringify({
+                                metadata: customerId
+                                    ? { orgId: customerId, name, task: 'config' }
+                                    : { name: dashboardName, task: 'config' },
+                            }),
+                            credentials: withCredentials ? 'include' : 'omit', // If withCredentials is true, set to 'include'. Otherwise, set to 'omit'.
+                        });
+                        responseData = await response.json(); // If the server returns JSON data
+                    }
+                    else {
+                        const url = new URL('https://quill-344421.uc.r.appspot.com/dashconfig');
+                        // Add query parameters to the URL
+                        url.search = new URLSearchParams({
+                            publicKey: publicKey,
+                            orgId: customerId,
+                            name: dashboardName,
+                        }).toString();
+                        const response = await fetch(url, {
+                            method: 'GET',
+                            headers: {
+                                environment: environment || undefined,
+                            },
+                        });
+                        responseData = await response.json();
+                    }
+                    const bigFilterObj = {};
+                    if (responseData.dateFilter &&
+                        Object.keys(responseData.dateFilter).length) {
+                        if (responseData.dateFilter.initialRange === 'LAST_90_DAYS') {
+                            const filter = {
+                                startDate: (0, date_fns_1.sub)((0, date_fns_1.startOfToday)(), { days: 90 }),
+                                endDate: new Date(),
+                                filterType: 'date_range',
+                                selectedValue: [
+                                    (0, date_fns_1.sub)((0, date_fns_1.startOfToday)(), { days: 90 }),
+                                    new Date(),
+                                    '90d',
+                                ],
+                                field: 'date_range',
+                                label: 'Date',
+                            };
+                            dashboardFiltersDispatch({
+                                type: 'ADD_DASHBOARD_FILTER',
+                                id: 'date_range',
+                                data: {
+                                    ...filter,
+                                },
+                            });
+                            setDateFilter(filter);
+                            bigFilterObj[filter.field] = filter;
+                        }
+                        else if (responseData.dateFilter.initialRange === 'LAST_30_DAYS') {
+                            const filter = {
+                                startDate: (0, date_fns_1.sub)((0, date_fns_1.startOfToday)(), { days: 30 }),
+                                endDate: new Date(),
+                                filterType: 'date_range',
+                                selectedValue: [
+                                    (0, date_fns_1.sub)((0, date_fns_1.startOfToday)(), { days: 30 }),
+                                    new Date(),
+                                    't',
+                                ],
+                                options: options,
+                                field: 'date_range',
+                                label: 'Date',
+                            };
+                            dashboardFiltersDispatch({
+                                type: 'ADD_DASHBOARD_FILTER',
+                                id: 'date_range',
+                                data: {
+                                    ...filter,
+                                },
+                            });
+                            setDateFilter(filter);
+                            bigFilterObj[filter.field] = filter;
+                            // return;
+                        }
+                        else if (responseData.dateFilter.initialRange === 'CURRENT_MONTH') {
+                            const filter = {
+                                startDate: (0, date_fns_2.startOfMonth)(new Date()),
+                                endDate: new Date(),
+                                filterType: 'date_range',
+                                selectedValue: [(0, date_fns_2.startOfMonth)(new Date()), new Date(), 'm'],
+                                options: options,
+                                field: 'date_range',
+                                label: 'Date',
+                            };
+                            dashboardFiltersDispatch({
+                                type: 'ADD_DASHBOARD_FILTER',
+                                id: 'date_range',
+                                data: {
+                                    ...filter,
+                                },
+                            });
+                            setDateFilter(filter);
+                            bigFilterObj[filter.field] = filter;
+                        }
+                        else {
+                            const filter = {
+                                startDate: (0, date_fns_1.sub)((0, date_fns_1.startOfToday)(), { days: 90 }),
+                                endDate: new Date(),
+                                filterType: 'date_range',
+                                selectedValue: [
+                                    (0, date_fns_1.sub)((0, date_fns_1.startOfToday)(), { days: 90 }),
+                                    new Date(),
+                                    '90d',
+                                ],
+                                options: options,
+                                field: 'date_range',
+                                label: 'Date',
+                            };
+                            dashboardFiltersDispatch({
+                                type: 'ADD_DASHBOARD_FILTER',
+                                id: 'date_range',
+                                data: {
+                                    ...filter,
+                                },
+                            });
+                            setDateFilter(filter);
+                            bigFilterObj[filter.field] = filter;
+                        }
+                    }
+                    if (responseData.filters && responseData.filters.length) {
+                        Object.values(responseData.filters)
+                            .filter(filter => filter.filterType !== 'date')
+                            .forEach(filter => {
+                            // processFilter(filter);
+                            bigFilterObj[filter.field] = processFilter(filter);
+                        });
+                    }
+                    dashboardFiltersDispatch({
+                        type: 'ADD_DASHBOARD_FILTERS',
+                        id: 'tons',
+                        data: bigFilterObj,
+                    });
+                    if (!responseData.dateFilter) {
+                        setDateFilter(null);
+                    }
+                }
+                catch (error) {
+                    console.error('Error fetching data:', error);
+                }
+            }
         }
-    }, [dashboardOptions]);
+        getDashboards();
+    }, [dashboardName, client]);
     (0, react_1.useEffect)(() => {
         async function getDashNames() {
             const response2 = await fetch(`https://quill-344421.uc.r.appspot.com/dashnames/${client.publicKey}/`, {
@@ -980,9 +1080,7 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
             setXAxisFormat('dynamic');
         }
         else {
-            setXAxisFormat(
-            // whatIsProbablyTheType(data.slice(0, 10), value)
-            (0, ReportBuilder_1.getPostgresBasicType)(newFields.find(field => field.name === value)));
+            setXAxisFormat(postgresFormatMap((0, ReportBuilder_1.getPostgresBasicType)(newFields.find(field => field.name === value))));
         }
     };
     const handleXAxisFieldChange = value => {
@@ -1000,9 +1098,7 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
             setXAxisFormat('dynamic');
         }
         else {
-            setXAxisFormat(
-            // whatIsProbablyTheType(data.slice(0, 10), value)
-            (0, ReportBuilder_1.getPostgresBasicType)(newFields.find(field => field.name === value)));
+            setXAxisFormat(postgresFormatMap((0, ReportBuilder_1.getPostgresBasicType)(newFields.find(field => field.name === value))));
         }
         if (bucketFields.length > 0) {
             const newBucketFields = [...bucketFields];
@@ -1015,8 +1111,7 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
         newYAxisFields[index] = {
             ...newYAxisFields[index],
             field: value,
-            // format: whatIsProbablyTheType(data.slice(0, 10), value),
-            format: (0, ReportBuilder_1.getPostgresBasicType)(newFields.find(field => field.name === value)),
+            format: postgresFormatMap(newFields.find(field => field.name === value)),
         };
         setYAxisFields(newYAxisFields);
     };
@@ -1047,21 +1142,24 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
     };
     (0, react_1.useEffect)(() => {
         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));
+        if (!dateFilter ||
+            (dateFilter && dateFilter.startDate && dateFilter.endDate)) {
+            setChartConfig(handleBucketData({
+                xAxisField,
+                xAxisLabel,
+                xAxisFormat,
+                chartName,
+                chartType,
+                dashboardName,
+                dateFieldTable,
+                dateField,
+                template,
+                yAxisFields: yAxisFields,
+                rows: data,
+                fields: newFields,
+                columns: columns,
+            }, bucketFields, dateFilter));
+        }
     }, [
         xAxisField,
         xAxisLabel,
@@ -1075,6 +1173,7 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
         yAxisFields,
         bucketFields,
         columns,
+        dateFilter,
     ]);
     return ((0, jsx_runtime_1.jsx)("div", { style: { display: 'inline-block' }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                 display: 'flex',