@quillsql/react 2.10.36 → 2.10.38

package/dist/esm/internals/ReportBuilder/PivotModal.js

@@ -7,7 +7,8 @@ import { RefreshIcon } from '../../assets';
 import { PivotList, PivotCard } from './PivotList';
 import { differenceInDays, eachDayOfInterval, eachMonthOfInterval, eachWeekOfInterval, eachYearOfInterval, endOfDay, isWithinInterval, subMilliseconds, min, max, add, } from 'date-fns';
 import { valueFormatter } from '../../utils/valueFormatter';
-import { numberFormatOptions, snakeCaseToTitleCase } from '../../ChartBuilder';
+import { numberFormatOptions, dateFormatOptions } from '../../ChartBuilder';
+import { snakeCaseToTitleCase } from '../../utils/textProcessing';
 import { QuillCard } from '../../components/QuillCard';
 const QuillHover = () => {
     return (_jsx("style", { children: `
@@ -102,7 +103,7 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
             // only use columns shown in the report builder's table
             // also filter out id
             if (col.field !== 'id' && !col.field.endsWith('_id')) {
-                map[col.field] = col.fieldType;
+                map[col.field] = col.fieldType || col.format;
             }
             return map;
         }, {});
@@ -121,7 +122,6 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
     }, [selectedPivotIndex, data, dateRange, createdPivots]);
     const columnSelectOptions = useMemo(() => {
         return [
-            { label: 'Select', value: '' },
             ...Object.keys(columnsToShow).map((key) => {
                 return { label: key, value: key };
             }),
@@ -136,13 +136,13 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
             removePivot();
         }
         else {
-            selectPivot(pivot, index);
+            selectPivot(pivot);
             setSelectedPivotType('recommended');
         }
         setIsOpen(false);
     };
     const onSelectCreatedPivot = (pivot, index) => {
-        selectPivot(pivot, index);
+        selectPivot(pivot);
         setSelectedPivotType('created');
         setIsOpen(false);
         setPopUpTitle('Add Pivot');
@@ -326,31 +326,38 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                                                 flexDirection: 'row',
                                                 gap: 20,
                                                 marginBottom: 5,
-                                            }, children: [_jsxs("div", { children: [_jsx(LabelComponent, { children: "Row Field" }), _jsx(SelectComponent, { label: 'Row Field', id: "pivot-row-field", value: pivotRowField, onChange: (e) => {
+                                            }, children: [_jsxs("div", { children: [_jsx(LabelComponent, { children: "Row Field" }), _jsx(SelectComponent, { id: "pivot-row-field", value: pivotRowField, onChange: (e) => {
                                                                 setPivotRowField(e === '' ? undefined : e);
-                                                            }, options: columnSelectOptions, theme: theme })] }), _jsxs("div", { children: [_jsx(LabelComponent, { children: "Column Field" }), _jsx(SelectComponent, { label: 'Column Field', id: "pivot-row-field", value: pivotColumnField, onChange: (e) => {
+                                                            }, options: columnSelectOptions.filter((option) => {
+                                                                const format = columns.find((col) => col.field === option.value)?.format;
+                                                                return (format === 'string' ||
+                                                                    dateFormatOptions.includes(format));
+                                                            }), theme: theme })] }), _jsxs("div", { children: [_jsx(LabelComponent, { children: "Column Field" }), _jsx(SelectComponent, { id: "pivot-row-field", value: pivotColumnField, onChange: (e) => {
                                                                 setPivotColumnField(e === '' ? undefined : e);
-                                                            }, options: columnSelectOptions, theme: theme })] })] }), _jsxs("div", { style: {
+                                                            }, options: columnSelectOptions.filter((option) => {
+                                                                return (columns.find((col) => col.field === option.value)
+                                                                    ?.format === 'string');
+                                                            }), theme: theme })] })] }), _jsxs("div", { style: {
                                                 display: 'flex',
                                                 flexDirection: 'row',
                                                 gap: 20,
                                                 marginBottom: 20,
-                                            }, children: [_jsxs("div", { children: [_jsx(LabelComponent, { children: "Value Field" }), _jsx(SelectComponent, { label: 'Value Field', id: "pivot-row-field", value: pivotValueField, onChange: (e) => {
+                                            }, children: [_jsxs("div", { children: [_jsx(LabelComponent, { children: "Value Field" }), _jsx(SelectComponent, { id: "pivot-row-field", value: pivotValueField, onChange: (e) => {
                                                                 setPivotValueField(e === '' ? undefined : e);
                                                             }, options: pivotAggregation === 'count'
                                                                 ? columnSelectOptions
                                                                 : columnSelectOptions.filter((option) => {
                                                                     return (option.value === '' ||
                                                                         numberFormatOptions.includes(columns.find((col) => col.field === option.value)?.format));
-                                                                }), theme: theme })] }), _jsxs("div", { children: [_jsx(LabelComponent, { children: "Aggregation Type" }), _jsx(SelectComponent, { label: 'Aggregation Type', id: "pivot-row-field", value: pivotAggregation, theme: theme, onChange: (e) => {
+                                                                }), theme: theme })] }), _jsxs("div", { children: [_jsx(LabelComponent, { children: "Aggregation Type" }), _jsx(SelectComponent, { id: "pivot-row-field", value: pivotAggregation, theme: theme, onChange: (e) => {
                                                                 if (e !== 'count' &&
                                                                     pivotValueField &&
                                                                     !numberFormatOptions.includes(columns.find((col) => col.field === pivotValueField)?.format)) {
                                                                     setPivotValueField(null);
                                                                 }
                                                                 setPivotAggregation(e === '' ? undefined : e);
-                                                            }, options: ['', 'sum', 'average', 'count'].map((option) => {
-                                                                return { label: option || 'Select', value: option };
+                                                            }, options: ['sum', 'average', 'count'].map((option) => {
+                                                                return { label: option, value: option };
                                                             }) })] })] })] }), _jsx("div", { children: _jsx(ButtonComponent, { id: "custom-button", onClick: () => {
                                             const errors = [];
                                             if (!pivotRowField) {
@@ -567,7 +574,12 @@ export function isDateField(fieldType) {
     return (fieldType === 'date' ||
         fieldType === 'datetime' ||
         fieldType === 'timestamp' ||
-        fieldType === 'timestamptz');
+        fieldType === 'timestamptz' ||
+        fieldType === 'MMM_yyyy' ||
+        fieldType === 'MMM_dd' ||
+        fieldType === 'MMM_dd_yyyy' ||
+        fieldType === 'MMM_dd_hh:mm_ap_pm' ||
+        fieldType === 'hh_ap_pm');
 }
 const isNullUndefinedOrInvalidDate = (date) => date === null || date === undefined || isNaN(date.getTime());
 // If the value is an object with key value (ie. a BigQuery date) we will
@@ -598,6 +610,9 @@ export function generatePivotTable(pivot, data, dateRange, isComparison, rowLimi
     data = fixBigQueryData(data);
     if (dateRange[0] === null && dateRange[1] === null) {
         dateRange = [new Date(0), add(new Date(), { years: 5 })];
+        if (isDateField(pivot.rowFieldType)) {
+            dateRange = getDateRange(dateRange, pivot.rowField, data);
+        }
     }
     if (!compRange ||
         isNullUndefinedOrInvalidDate(compRange[0]) ||
@@ -853,18 +868,6 @@ export function generatePivotTable(pivot, data, dateRange, isComparison, rowLimi
                     : snakeCaseToTitleCase(pivot.rowField),
             field: pivot.rowField,
         },
-        ...(!pivot.columnField
-            ? [
-                {
-                    label: pivot.rowField === null
-                        ? 'Null'
-                        : pivot.rowField === false
-                            ? 'False'
-                            : `Comparison ${snakeCaseToTitleCase(pivot.rowField)}`,
-                    field: `comparison_${pivot.rowField}`,
-                },
-            ]
-            : []),
         ...uniqueColumns.map((column, index) => {
             const columnName = isDateField(pivot.columnFieldType)
                 ? getDateString(column, dateRange)

package/dist/esm/models/Pivots.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Pivots.d.ts.map

package/dist/esm/models/Pivots.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pivots.d.ts","sourceRoot":"","sources":["../../../src/models/Pivots.ts"],"names":[],"mappings":""}

package/dist/esm/models/Pivots.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/Tables.d.ts

@@ -0,0 +1,16 @@
+export interface Column {
+    label: string;
+    field: string;
+    name: string;
+    displayName: string;
+    fieldType: string;
+    format: string;
+}
+export interface Table {
+}
+export interface YAxisField {
+    field: string;
+    label: string;
+    format: string;
+}
+//# sourceMappingURL=Tables.d.ts.map

package/dist/esm/models/Tables.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tables.d.ts","sourceRoot":"","sources":["../../../src/models/Tables.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,KAAK;CAAG;AAEzB,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB"}

package/dist/esm/models/Tables.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/utils/aggregate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"aggregate.d.ts","sourceRoot":"","sources":["../../../src/utils/aggregate.tsx"],"names":[],"mappings":"AA2DA,wBAAgB,qBAAqB,CAAC,IAAI,KAAA,EAAE,SAAS,KAAA,UAuCpD;AAED,wBAAgB,UAAU,CAAC,aAAa,KAAA,EAAE,YAAY,KAAA,EAAE,UAAU,KAAA,OA6IjE;AACD,wBAAgB,SAAS,CAAC,aAAa,KAAA,EAAE,YAAY,KAAA,EAAE,UAAU,KAAA,OAgRhE"}
+{"version":3,"file":"aggregate.d.ts","sourceRoot":"","sources":["../../../src/utils/aggregate.tsx"],"names":[],"mappings":"AA2DA,wBAAgB,qBAAqB,CAAC,IAAI,KAAA,EAAE,SAAS,KAAA,UAuCpD;AAED,wBAAgB,UAAU,CAAC,aAAa,KAAA,EAAE,YAAY,KAAA,EAAE,UAAU,KAAA,OAmJjE;AACD,wBAAgB,SAAS,CAAC,aAAa,KAAA,EAAE,YAAY,KAAA,EAAE,UAAU,KAAA,OAqRhE"}

package/dist/esm/utils/aggregate.js

@@ -87,16 +87,18 @@ export function whatIsProbablyTheType(data, fieldName) {
 export function aggregate2(dashboardItem, bucketFields, dateFilter) {
     const timePeriod = findTimePeriod(dateFilter);
     const rows = dashboardItem.rows;
+    const fields = dashboardItem.fields || dashboardItem.columns;
     const xAxisLabel = timePeriod;
     const xAxisField = timePeriod;
     if (!bucketFields.length || !rows.length)
         return { ...dashboardItem, bucketedRows: [] };
-    if (getPostgresBasicType(dashboardItem.fields.find(field => field.name === bucketFields[0].field)) === 'string') {
+    if (dashboardItem.fields &&
+        getPostgresBasicType(dashboardItem.fields.find((field) => field.name === bucketFields[0].field)) === 'string') {
         const stringField = bucketFields[0].field;
         const aggregation = {};
         // let aggregatedArray;
         // if (rows.length > 0) {
-        rows.forEach(row => {
+        rows.forEach((row) => {
             const strValue = row[stringField];
             if (!aggregation[strValue]) {
                 aggregation[strValue] = {
@@ -107,7 +109,7 @@ export function aggregate2(dashboardItem, bucketFields, dateFilter) {
             aggregation[strValue][dashboardItem.yAxisFields[0].field] += parseFloat(row[dashboardItem.yAxisFields[0].field]);
         });
         // Convert the object to an array
-        aggregatedArray = Object.keys(aggregation).map(str => ({
+        aggregatedArray = Object.keys(aggregation).map((str) => ({
             [stringField]: str,
             [dashboardItem.yAxisFields[0].field]: aggregation[str][dashboardItem.yAxisFields[0].field].toFixed(2),
         }));
@@ -122,7 +124,7 @@ export function aggregate2(dashboardItem, bucketFields, dateFilter) {
             bucketedRows: aggregatedArray,
         };
     }
-    else if (getPostgresBasicType(dashboardItem.fields.find(field => field.name === bucketFields[0].field)) === 'date') {
+    else if (getPostgresBasicType(dashboardItem.fields.find((field) => field.name === bucketFields[0].field)) === 'date') {
         const dateField = bucketFields[0].field;
         let xAxisFormat;
         switch (timePeriod) {
@@ -141,7 +143,7 @@ export function aggregate2(dashboardItem, bucketFields, dateFilter) {
         }
         const aggregation = {};
         // TODO MAKE WORK WITH MULTIPLE Y AXIS FIELDS
-        rows.forEach(row => {
+        rows.forEach((row) => {
             const date = new Date(row[dateField]);
             let formattedDate;
             switch (timePeriod) {
@@ -178,7 +180,7 @@ export function aggregate2(dashboardItem, bucketFields, dateFilter) {
         // Convert the object to an array and format the spend amounts
         const aggregatedArray = Object.keys(aggregation).length
             ? Object.keys(aggregation)
-                .map(date => ({
+                .map((date) => ({
                 [timePeriod]: date,
                 [dashboardItem.yAxisFields[0].field]: aggregation[date][dashboardItem.yAxisFields[0].field].toFixed(2),
             }))
@@ -202,6 +204,7 @@ export function aggregate(dashboardItem, bucketFields, dateFilter) {
         : 'month';
     const rows = dashboardItem.rows;
     const compareRows = dashboardItem.compareRows;
+    const fields = dashboardItem.fields || dashboardItem.columns;
     const xAxisLabel = timePeriod;
     const xAxisField = timePeriod;
     if (!rows.length) {
@@ -211,23 +214,23 @@ export function aggregate(dashboardItem, bucketFields, dateFilter) {
         //TODO: allow comparison for nonbucketed
         return { ...dashboardItem, bucketedRows: [] };
     }
-    if (getPostgresBasicType(dashboardItem.fields.find(field => field.name === bucketFields[0].field)) === 'string') {
+    if (getPostgresBasicType(fields.find((field) => field.name === bucketFields[0].field)) === 'string') {
         const stringField = bucketFields[0].field;
         const aggregation = {};
-        rows.forEach(row => {
+        rows.forEach((row) => {
             const strValue = row[stringField];
             if (!aggregation[strValue]) {
                 aggregation[strValue] = {};
-                dashboardItem.yAxisFields.forEach(yAxisField => {
+                dashboardItem.yAxisFields.forEach((yAxisField) => {
                     aggregation[strValue][yAxisField.field] = 0;
                 });
             }
             // Sum up the amounts (or any other field) for each unique string
-            dashboardItem.yAxisFields.forEach(yAxisField => {
+            dashboardItem.yAxisFields.forEach((yAxisField) => {
                 aggregation[strValue][yAxisField.field] += parseFloat(row[yAxisField.field] ?? '0.0');
             });
         });
-        const aggregatedArray = Object.keys(aggregation).map(key => {
+        const aggregatedArray = Object.keys(aggregation).map((key) => {
             return {
                 [stringField]: key,
                 ...aggregation[key],
@@ -240,7 +243,7 @@ export function aggregate(dashboardItem, bucketFields, dateFilter) {
             bucketedRows: aggregatedArray,
         };
     }
-    else if (getPostgresBasicType(dashboardItem.fields.find(field => field.name === bucketFields[0].field)) === 'date') {
+    else if (getPostgresBasicType(dashboardItem.fields.find((field) => field.name === bucketFields[0].field)) === 'date') {
         const dateField = bucketFields[0].field;
         let interval;
         let xAxisFormat;
@@ -290,13 +293,13 @@ export function aggregate(dashboardItem, bucketFields, dateFilter) {
         const endDate = dateFilter?.endDate || new Date();
         while (iteratedDate <= endDate) {
             aggregation[iteratedDate] = {};
-            dashboardItem.yAxisFields.forEach(yAxisField => {
+            dashboardItem.yAxisFields.forEach((yAxisField) => {
                 aggregation[iteratedDate][yAxisField.field] = 0;
             });
             iteratedDate = add(iteratedDate, interval);
         }
         // TODO MAKE WORK WITH MULTIPLE Y AXIS FIELDS
-        rows.forEach(row => {
+        rows.forEach((row) => {
             const date = parse(row[dateField], 'yyyy-MM-dd', new Date());
             let formattedDate;
             switch (timePeriod) {
@@ -321,19 +324,19 @@ export function aggregate(dashboardItem, bucketFields, dateFilter) {
             }
             if (!aggregation[formattedDate]) {
                 aggregation[formattedDate] = {};
-                dashboardItem.yAxisFields.forEach(yAxisField => {
+                dashboardItem.yAxisFields.forEach((yAxisField) => {
                     aggregation[formattedDate][yAxisField.field] = 0;
                 });
             }
             // Sum the amounts for each field and period
-            dashboardItem.yAxisFields.forEach(yAxisField => {
+            dashboardItem.yAxisFields.forEach((yAxisField) => {
                 aggregation[formattedDate][yAxisField.field] += parseFloat(row[yAxisField.field]);
             });
         });
         // Convert the object to an array and format the spend amounts
         const aggregatedArray = Object.keys(aggregation).length
             ? Object.keys(aggregation)
-                .map(date => ({
+                .map((date) => ({
                 [timePeriod]: date,
                 [dashboardItem.yAxisFields[0].field]: aggregation[date][dashboardItem.yAxisFields[0].field].toFixed(2),
             }))
@@ -343,11 +346,11 @@ export function aggregate(dashboardItem, bucketFields, dateFilter) {
             dateFilter.comparison &&
             dateFilter.comparisonRange.value !== 'NO_COMPARISON' &&
             dashboardItem.compareRows) {
-            const offset = COMPARISON_OPTIONS.find(option => {
+            const offset = COMPARISON_OPTIONS.find((option) => {
                 return option.value === dateFilter.comparisonRange.value;
             })?.offset;
-            aggregatedArray.forEach(row => {
-                dashboardItem.yAxisFields.forEach(yAxisField => {
+            aggregatedArray.forEach((row) => {
+                dashboardItem.yAxisFields.forEach((yAxisField) => {
                     row[yAxisField.field + '2'] = 0;
                 });
                 row[xAxisField + '2'] = sub(new Date(row[timePeriod]), offset).toISOString();
@@ -379,8 +382,8 @@ export function aggregate(dashboardItem, bucketFields, dateFilter) {
                 }
                 // Sum the amounts for each field and period
                 if (bucketFields?.length) {
-                    dashboardItem.yAxisFields.forEach(yAxisField => {
-                        const correctBucketIndex = aggregatedArray.findIndex(row => {
+                    dashboardItem.yAxisFields.forEach((yAxisField) => {
+                        const correctBucketIndex = aggregatedArray.findIndex((row) => {
                             return row[timePeriod] === formattedDate;
                         });
                         if (correctBucketIndex >= 0) {
@@ -397,7 +400,7 @@ export function aggregate(dashboardItem, bucketFields, dateFilter) {
                     });
                 }
                 else {
-                    dashboardItem.yAxisFields.forEach(yAxisField => {
+                    dashboardItem.yAxisFields.forEach((yAxisField) => {
                         if (aggregatedArray.length - 1 >= index) {
                             if (!aggregatedArray[index][yAxisField.field + '2']) {
                                 aggregatedArray[index][yAxisField.field + '2'] = 0;

package/dist/esm/utils/textProcessing.d.ts

@@ -0,0 +1,5 @@
+export declare function capitalize(text: string): string;
+export declare function depluralize(text: string): string;
+export declare function snakeCaseToTitleCase(str: string): string;
+export declare function removeDoubleQuotes(str: string): string;
+//# sourceMappingURL=textProcessing.d.ts.map

package/dist/esm/utils/textProcessing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textProcessing.d.ts","sourceRoot":"","sources":["../../../src/utils/textProcessing.ts"],"names":[],"mappings":"AAAA,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE/C;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAQhD;AAED,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,MAAM,UAa/C;AAED,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,UAK7C"}

package/dist/esm/utils/textProcessing.js

@@ -0,0 +1,30 @@
+export function capitalize(text) {
+    return text.charAt(0).toUpperCase() + text.slice(1);
+}
+export function depluralize(text) {
+    if (text.endsWith("ies")) {
+        return text.slice(0, -3) + "y";
+    }
+    if (text.endsWith("s")) {
+        return text.slice(0, -1);
+    }
+    return text;
+}
+export function snakeCaseToTitleCase(str) {
+    if (!str) {
+        return str;
+    }
+    return str
+        .toString()
+        .split(/_| /)
+        .map((word) => word === 'id'
+        ? 'ID'
+        : word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+        .join(' ');
+}
+export function removeDoubleQuotes(str) {
+    if (!str) {
+        return str;
+    }
+    return str.replace(/"/g, '');
+}

package/dist/esm/utils/types.d.ts

@@ -0,0 +1,4 @@
+import { Field } from '../hooks/useQuill';
+import { Column } from '../models/Tables';
+export declare function getPostgresBasicType(field: Field | Column): string;
+//# sourceMappingURL=types.d.ts.map

package/dist/esm/utils/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utils/types.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,CAgDlE"}

package/dist/esm/utils/types.js

@@ -0,0 +1,48 @@
+export function getPostgresBasicType(field) {
+    let format;
+    // first check if column.dataTypeID exists
+    if ('dataTypeID' in field) {
+        switch (field.dataTypeID) {
+            case 20: // int8
+            case 21: // int2
+            case 23: // int4
+            case 700: // float4
+            case 701: // float8
+            case 1700: // numeric
+                format = 'number';
+                break;
+            case 1082: // date
+            case 1083: // time
+            case 1184: // timestamptz
+            case 1114: // timestamp
+                format = 'date';
+                break;
+            case 1043: // varchar
+            default:
+                format = 'string';
+        }
+    }
+    else if (field.fieldType) {
+        // if column.dataTypeID doesn't exist, check column.fieldType
+        switch (field.fieldType) {
+            case 'int8':
+            case 'int2':
+            case 'int4':
+            case 'float4':
+            case 'float8':
+            case 'numeric':
+                format = 'number';
+                break;
+            case 'date':
+            case 'time':
+            case 'timestamptz':
+            case 'timestamp':
+                format = 'date';
+                break;
+            case 'varchar':
+            default:
+                format = 'string';
+        }
+    }
+    return format || 'string';
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quillsql/react",
-  "version": "2.10.36",
+  "version": "2.10.38",
   "exports": {
     ".": {
       "import": "./dist/esm/index.js",