@quillsql/react 2.8.8 → 2.8.9

package/dist/utils/aggregate.js

@@ -1,10 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.aggregate = exports.aggregate2 = exports.whatIsProbablyTheType = void 0;
 // @ts-nocheck
-const ReportBuilder_1 = require("../ReportBuilder");
-const Dashboard_1 = require("../Dashboard");
-const date_fns_1 = require("date-fns");
+import { getPostgresBasicType } from '../ReportBuilder';
+import { COMPARISON_OPTIONS } from '../Dashboard';
+import { add, sub, startOfWeek, startOfDay, startOfMonth, startOfYear, parse, } from 'date-fns';
 function findTimePeriod(dateFilter) {
     if (!dateFilter) {
         return null;
@@ -53,7 +50,7 @@ function findTimePeriod(dateFilter) {
     else
         return 'year';
 }
-function whatIsProbablyTheType(data, fieldName) {
+export function whatIsProbablyTheType(data, fieldName) {
     const counts = {
         date: 0,
         number: 0,
@@ -87,15 +84,14 @@ function whatIsProbablyTheType(data, fieldName) {
     const maxType = Object.keys(counts).reduce((a, b) => counts[a] > counts[b] ? a : b);
     return maxType;
 }
-exports.whatIsProbablyTheType = whatIsProbablyTheType;
-function aggregate2(dashboardItem, bucketFields, dateFilter) {
+export function aggregate2(dashboardItem, bucketFields, dateFilter) {
     const timePeriod = findTimePeriod(dateFilter);
     const rows = dashboardItem.rows;
     const xAxisLabel = timePeriod;
     const xAxisField = timePeriod;
     if (!bucketFields.length || !rows.length)
         return { ...dashboardItem, bucketedRows: [] };
-    if ((0, ReportBuilder_1.getPostgresBasicType)(dashboardItem.fields.find(field => field.name === bucketFields[0].field)) === 'string') {
+    if (getPostgresBasicType(dashboardItem.fields.find(field => field.name === bucketFields[0].field)) === 'string') {
         const stringField = bucketFields[0].field;
         const aggregation = {};
         // let aggregatedArray;
@@ -126,7 +122,7 @@ function aggregate2(dashboardItem, bucketFields, dateFilter) {
             bucketedRows: aggregatedArray,
         };
     }
-    else if ((0, ReportBuilder_1.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) {
@@ -200,8 +196,7 @@ function aggregate2(dashboardItem, bucketFields, dateFilter) {
         return dashboardItem;
     }
 }
-exports.aggregate2 = aggregate2;
-function aggregate(dashboardItem, bucketFields, dateFilter) {
+export function aggregate(dashboardItem, bucketFields, dateFilter) {
     const timePeriod = dateFilter && Object.keys(dateFilter).length
         ? findTimePeriod(dateFilter)
         : 'month';
@@ -216,7 +211,7 @@ function aggregate(dashboardItem, bucketFields, dateFilter) {
         //TODO: allow comparison for nonbucketed
         return { ...dashboardItem, bucketedRows: [] };
     }
-    if ((0, ReportBuilder_1.getPostgresBasicType)(dashboardItem.fields.find(field => field.name === bucketFields[0].field)) === 'string') {
+    if (getPostgresBasicType(dashboardItem.fields.find(field => field.name === bucketFields[0].field)) === 'string') {
         const stringField = bucketFields[0].field;
         const aggregation = {};
         rows.forEach(row => {
@@ -245,7 +240,7 @@ function aggregate(dashboardItem, bucketFields, dateFilter) {
             bucketedRows: aggregatedArray,
         };
     }
-    else if ((0, ReportBuilder_1.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;
@@ -273,19 +268,19 @@ function aggregate(dashboardItem, bucketFields, dateFilter) {
         let formattedDate;
         switch (timePeriod) {
             case 'day': {
-                formattedDate = (0, date_fns_1.startOfDay)(firstEntryDate);
+                formattedDate = startOfDay(firstEntryDate);
                 break;
             }
             case 'week': {
-                formattedDate = (0, date_fns_1.startOfWeek)(firstEntryDate, { weekStartsOn: 1 });
+                formattedDate = startOfWeek(firstEntryDate, { weekStartsOn: 1 });
                 break;
             }
             case 'month': {
-                formattedDate = (0, date_fns_1.startOfMonth)(firstEntryDate);
+                formattedDate = startOfMonth(firstEntryDate);
                 break;
             }
             case 'year': {
-                formattedDate = (0, date_fns_1.startOfYear)(firstEntryDate);
+                formattedDate = startOfYear(firstEntryDate);
                 break;
             }
             default:
@@ -298,27 +293,27 @@ function aggregate(dashboardItem, bucketFields, dateFilter) {
             dashboardItem.yAxisFields.forEach(yAxisField => {
                 aggregation[iteratedDate][yAxisField.field] = 0;
             });
-            iteratedDate = (0, date_fns_1.add)(iteratedDate, interval);
+            iteratedDate = add(iteratedDate, interval);
         }
         // TODO MAKE WORK WITH MULTIPLE Y AXIS FIELDS
         rows.forEach(row => {
-            const date = (0, date_fns_1.parse)(row[dateField], 'yyyy-MM-dd', new Date());
+            const date = parse(row[dateField], 'yyyy-MM-dd', new Date());
             let formattedDate;
             switch (timePeriod) {
                 case 'day': {
-                    formattedDate = (0, date_fns_1.startOfDay)(date);
+                    formattedDate = startOfDay(date);
                     break;
                 }
                 case 'week': {
-                    formattedDate = (0, date_fns_1.startOfWeek)(date, { weekStartsOn: 1 });
+                    formattedDate = startOfWeek(date, { weekStartsOn: 1 });
                     break;
                 }
                 case 'month': {
-                    formattedDate = (0, date_fns_1.startOfMonth)(date);
+                    formattedDate = startOfMonth(date);
                     break;
                 }
                 case 'year': {
-                    formattedDate = (0, date_fns_1.startOfYear)(date);
+                    formattedDate = startOfYear(date);
                     break;
                 }
                 default:
@@ -348,35 +343,35 @@ function aggregate(dashboardItem, bucketFields, dateFilter) {
             dateFilter.comparison &&
             dateFilter.comparisonRange.value !== 'NO_COMPARISON' &&
             dashboardItem.compareRows) {
-            const offset = Dashboard_1.COMPARISON_OPTIONS.find(option => {
+            const offset = COMPARISON_OPTIONS.find(option => {
                 return option.value === dateFilter.comparisonRange.value;
             })?.offset;
             aggregatedArray.forEach(row => {
                 dashboardItem.yAxisFields.forEach(yAxisField => {
                     row[yAxisField.field + '2'] = 0;
                 });
-                row[xAxisField + '2'] = (0, date_fns_1.sub)(new Date(row[timePeriod]), offset).toISOString();
+                row[xAxisField + '2'] = sub(new Date(row[timePeriod]), offset).toISOString();
             });
             compareRows.sort((a, b) => new Date(a[dateField]) - new Date(b[dateField]));
             compareRows.forEach((row, index) => {
-                let date = (0, date_fns_1.parse)(row[dateField], 'yyyy-MM-dd', new Date());
-                date = (0, date_fns_1.add)(date, offset);
+                let date = parse(row[dateField], 'yyyy-MM-dd', new Date());
+                date = add(date, offset);
                 let formattedDate;
                 switch (timePeriod) {
                     case 'day': {
-                        formattedDate = (0, date_fns_1.startOfDay)(date);
+                        formattedDate = startOfDay(date);
                         break;
                     }
                     case 'week': {
-                        formattedDate = (0, date_fns_1.startOfWeek)(date, { weekStartsOn: 1 });
+                        formattedDate = startOfWeek(date, { weekStartsOn: 1 });
                         break;
                     }
                     case 'month': {
-                        formattedDate = (0, date_fns_1.startOfMonth)(date);
+                        formattedDate = startOfMonth(date);
                         break;
                     }
                     case 'year': {
-                        formattedDate = (0, date_fns_1.startOfYear)(date);
+                        formattedDate = startOfYear(date);
                         break;
                     }
                     default:
@@ -426,5 +421,3 @@ function aggregate(dashboardItem, bucketFields, dateFilter) {
         return dashboardItem;
     }
 }
-exports.aggregate = aggregate;
-//# sourceMappingURL=aggregate.js.map

package/dist/utils/axisFormatter.d.ts

@@ -0,0 +1,20 @@
+type Field = {
+    _id: string;
+    label: string;
+    field: string;
+    format: 'percent';
+};
+type Props = {
+    value: string | number | boolean | undefined | null;
+    field: string | undefined | null;
+    fields: Field[];
+};
+/**
+ * Pretty-prints the given values to their nice-looking string form.
+ *
+ * The axis formatter will print a shorter version of the valueFormatter, which
+ * fits nicely along the X or Y axes.
+ */
+export declare const axisFormatter: ({ value, field, fields, }: Props) => string | number | boolean;
+export {};
+//# sourceMappingURL=axisFormatter.d.ts.map

package/dist/utils/axisFormatter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"axisFormatter.d.ts","sourceRoot":"","sources":["../../src/utils/axisFormatter.ts"],"names":[],"mappings":"AAGA,KAAK,KAAK,GAAG;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC;IACpD,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IACjC,MAAM,EAAE,KAAK,EAAE,CAAC;CACjB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,aAAa,8BAIvB,KAAK,KAAG,MAAM,GAAG,MAAM,GAAG,OA+B5B,CAAC"}

package/dist/utils/axisFormatter.js

@@ -0,0 +1,185 @@
+import { endOfWeek, format, getWeek, isValid, startOfWeek } from 'date-fns';
+import { utcToZonedTime } from 'date-fns-tz';
+/**
+ * Pretty-prints the given values to their nice-looking string form.
+ *
+ * The axis formatter will print a shorter version of the valueFormatter, which
+ * fits nicely along the X or Y axes.
+ */
+export const axisFormatter = ({ value, field, fields, }) => {
+    if (field === undefined || field === null)
+        return '';
+    if (value === undefined || value === null)
+        return '';
+    const fieldInfo = fields.find((f) => f.field === field);
+    if (!fieldInfo)
+        return '';
+    const HANDLERS = {
+        percent: formatPercent,
+        dollar_amount: formatDollarAmount,
+        dollar_cents: formatDollarCents,
+        whole_number: formatWholeNumber,
+        one_decimal_place: formatOneDecimalPlace,
+        two_decimal_places: formatTwoDecimalPlaces,
+        string: formatString,
+        yyyy: format_YYYY,
+        MMM_yyyy: format_MMM_yyyy,
+        MMM_dd_yyyy: format_MMM_dd_yyyy,
+        hh_ap_pm: format_hh_ap_pm,
+        'MMM_dd-MMM_dd': format_MMM_dd_MMM_dd,
+        'MMM_dd_hh:mm_ap_pm': format_MMM_dd_hh_mm_ap_pm,
+        'wo, yyyy': format_wo_yyyy,
+    };
+    // try to handle this value using the associated formatType handler
+    const formatType = fieldInfo.format;
+    if (Object.keys(HANDLERS).includes(formatType)) {
+        return HANDLERS[formatType](value);
+    }
+    return value.toString(); // by default make this value a string
+};
+/**
+ * HELPER FUNCTION DEFINITIONS
+ **/
+/**
+ * Formats the value as a string using the built-in converstion.
+ */
+const formatString = (value) => value.toString();
+/**
+ * Formats the value as a (rounded) currency amount in dollars.
+ *
+ * eg. @example format(1234.567) => "$1.2K"
+ */
+const formatDollarAmount = (value) => {
+    const formatter = new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+        minimumSignificantDigits: 2,
+        maximumSignificantDigits: 2,
+        notation: 'compact',
+        compactDisplay: 'short',
+    });
+    return formatter.format(Number(value ?? 0));
+};
+/**
+ * Formats the value as a (rounded) currency amount in dollars and cents.
+ *
+ * @example format(1234.567) => "$1.2K"
+ */
+const formatDollarCents = (value) => {
+    const formatter = new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+        minimumSignificantDigits: 2,
+        maximumSignificantDigits: 2,
+        notation: 'compact',
+        compactDisplay: 'short',
+    });
+    return formatter.format(Number(value ?? 0));
+};
+/**
+ * Formats the value as a (rounded) integer.
+ *
+ * @example format(1234.567) => "1.2K"
+ */
+const formatWholeNumber = (value) => {
+    const formatter = new Intl.NumberFormat('en-US', {
+        minimumSignificantDigits: 2,
+        maximumSignificantDigits: 2,
+        notation: 'compact',
+        compactDisplay: 'short',
+    });
+    return formatter.format(Number(value));
+};
+/**
+ * Formats the value as a number rounded to exactly one decimal place.
+ *
+ * @example format(1234.567) => "1.2K"
+ * @example format(123.456) => "1,234.6"
+ */
+const formatOneDecimalPlace = (value) => {
+    const formatter = new Intl.NumberFormat('en-US', {
+        minimumFractionDigits: 1,
+        maximumFractionDigits: 1,
+        notation: 'compact',
+        compactDisplay: 'short',
+    });
+    return formatter.format(Number(value));
+};
+/**
+ * Formats the value as a number rounded to exactly two decimal places.
+ *
+ * @example format(1234.567) => "1.23K"
+ * @example format(123.456) => "123.46"
+ */
+const formatTwoDecimalPlaces = (value) => {
+    const formatter = new Intl.NumberFormat('en-US', {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+        notation: 'compact',
+        compactDisplay: 'short',
+    });
+    return formatter.format(Number(value));
+};
+/**
+ * Formats the value as a percentage.
+ *
+ * @example format(0.1234) => "12%"
+ * @example format(0.99) => "99%"
+ *
+ * NOTE: This function expects that the value is already a percentage value, and
+ * does not try to guess whether the percentage is represented as a whole number
+ * or a decimal.
+ *
+ * @example format(1234.567) => "120K%"
+ * @example format(99) => "9.9K%"
+ */
+const formatPercent = (value) => {
+    const formatter = new Intl.NumberFormat('en-US', {
+        style: 'percent',
+        minimumSignificantDigits: 2,
+        maximumSignificantDigits: 2,
+        notation: 'compact',
+        compactDisplay: 'short',
+    });
+    return formatter.format(Number(value));
+};
+// Converts the value to a UTC date with the given format string. If the
+// resulting date is invalid, it returns "Invalid date".
+const _getUTCDateHelper = (value, fmt) => {
+    const utcDate = utcToZonedTime(new Date(value), 'UTC');
+    if (!isValid(utcDate))
+        return 'Invalid date';
+    return format(utcDate, fmt);
+};
+const format_YYYY = (value) => _getUTCDateHelper(value, 'yyyy');
+const format_MMM_yyyy = (value) => _getUTCDateHelper(value, 'MMM yyyy');
+const format_hh_ap_pm = (value) => _getUTCDateHelper(value, 'hh:mm aa');
+const format_MMM_dd_yyyy = (value) => _getUTCDateHelper(value, 'dd MMM yyyy');
+const format_MMM_dd_MMM_dd = (value) => {
+    const utcDate = utcToZonedTime(new Date(value), 'UTC');
+    if (!isValid(utcDate))
+        return 'Invalid date';
+    const monday = startOfWeek(utcDate, { weekStartsOn: 1 });
+    const sunday = endOfWeek(utcDate, { weekStartsOn: 1 });
+    // Check if start and end are in the same month
+    if (format(monday, 'MMM') === format(sunday, 'MMM')) {
+        return `${format(monday, 'MMM dd')} - ${format(sunday, 'dd')}`;
+    }
+    else {
+        return `${format(monday, 'MMM dd')} - ${format(sunday, 'MMM dd')}`;
+    }
+};
+const format_MMM_dd_hh_mm_ap_pm = (value) => {
+    const utcDate = utcToZonedTime(new Date(value), 'UTC');
+    if (!isValid(utcDate))
+        return 'Invalid date';
+    const formatStr = utcDate.getMinutes() === 0 ? 'MMM do h a' : 'MMM do h:mm a';
+    const res = format(utcDate, formatStr);
+    return res.slice(0, -2) + res.slice(-2).toLowerCase();
+};
+const format_wo_yyyy = (value) => {
+    const utcDate = utcToZonedTime(new Date(value), 'UTC');
+    if (!isValid(utcDate))
+        return 'Invalid date';
+    return `${getWeek(utcDate)},${utcDate.getFullYear()}`;
+};

package/dist/utils/colorToHex.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.COLOR_TO_HEX = void 0;
-exports.COLOR_TO_HEX = {
+export const COLOR_TO_HEX = {
     aliceblue: '#f0f8ff',
     antiquewhite: '#faebd7',
     aqua: '#00ffff',
@@ -144,4 +141,3 @@ exports.COLOR_TO_HEX = {
     yellow: '#ffff00',
     yellowgreen: '#9acd32',
 };
-//# sourceMappingURL=colorToHex.js.map

package/dist/utils/dataFetcher.js

@@ -1,9 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDataFromCloud = exports.getData = void 0;
 // this function gets the data either from the self hosted endpoint or
 // our cloud server
-async function getData(client, cloudQueryEndpoint, noCred, hostedRequestBody, cloudRequestBody, method = 'POST') {
+export async function getData(client, cloudQueryEndpoint, noCred, hostedRequestBody, cloudRequestBody, method = 'POST') {
     if (client.queryEndpoint) {
         // self hosted
         const resp = await fetch(client.queryEndpoint, {
@@ -29,8 +26,7 @@ async function getData(client, cloudQueryEndpoint, noCred, hostedRequestBody, cl
         return await getDataFromCloud(client, cloudQueryEndpoint, cloudRequestBody, method);
     }
 }
-exports.getData = getData;
-async function getDataFromCloud(client, cloudQueryEndpoint, cloudRequestBody, method = 'POST') {
+export async function getDataFromCloud(client, cloudQueryEndpoint, cloudRequestBody, method = 'POST') {
     const environment = client?.environment;
     const resp = await fetch(`https://quill-344421.uc.r.appspot.com/${cloudQueryEndpoint}`, 
     // `http://localhost:8080/${cloudQueryEndpoint}`,
@@ -60,5 +56,3 @@ async function getDataFromCloud(client, cloudQueryEndpoint, cloudRequestBody, me
         return null;
     }
 }
-exports.getDataFromCloud = getDataFromCloud;
-//# sourceMappingURL=dataFetcher.js.map

package/dist/utils/downloadCSV.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.downloadCSV = void 0;
 // @ts-nocheck
-function downloadCSV(rows, filename) {
+export function downloadCSV(rows, filename) {
     const json = rows;
     const fields = Object.keys(json[0]);
     const csvRows = [];
@@ -25,5 +22,3 @@ function downloadCSV(rows, filename) {
     downloadLink.click();
     document.body.removeChild(downloadLink);
 }
-exports.downloadCSV = downloadCSV;
-//# sourceMappingURL=downloadCSV.js.map

package/dist/utils/schema.d.ts

@@ -0,0 +1,22 @@
+interface TableInfo {
+    displayName: string;
+    columns: {
+        name: string;
+        label: string;
+        fieldType: string;
+    }[];
+}
+export interface ColumnSelectorInfo {
+    name: string;
+    selected: boolean;
+    presentTables: string[];
+    selectable: boolean;
+    tableName: string;
+    displayName: string;
+    textFiltered: boolean;
+    fieldType: string;
+}
+export declare function formatColumnData(tableInfo: TableInfo[], selectedTable: any, customerFieldName: string): ColumnSelectorInfo[];
+export declare function columnGrouping(tableInfo: TableInfo[]): any[];
+export {};
+//# sourceMappingURL=schema.d.ts.map

package/dist/utils/schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../src/utils/schema.ts"],"names":[],"mappings":"AAGA,UAAU,SAAS;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC/D;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,gBAAgB,CAC9B,SAAS,EAAE,SAAS,EAAE,EACtB,aAAa,EAAE,GAAG,EAClB,iBAAiB,EAAE,MAAM,GACxB,kBAAkB,EAAE,CA0CtB;AAGD,wBAAgB,cAAc,CAAC,SAAS,EAAE,SAAS,EAAE,GAAG,GAAG,EAAE,CAmG5D"}

package/dist/utils/schema.js

@@ -0,0 +1,134 @@
+import { deSnakeOrCamelCase, singularize } from './textFormatting';
+export function formatColumnData(tableInfo, selectedTable, customerFieldName) {
+    const initialState = [];
+    const formattedData = tableInfo.reduce((allColumnDetails, table) => {
+        let setSelected = false;
+        if (selectedTable.displayName === table.displayName) {
+            setSelected = true;
+        }
+        table.columns.forEach((column) => {
+            if (column.name === customerFieldName) {
+                return;
+            }
+            let formattedDisplayName = '';
+            console.log(column.name);
+            if (column.name.endsWith('_id')) {
+                formattedDisplayName = singularize(deSnakeOrCamelCase(column.name));
+            }
+            else {
+                formattedDisplayName =
+                    singularize(deSnakeOrCamelCase(table.displayName)) +
+                        ' ' +
+                        deSnakeOrCamelCase(column.name);
+            }
+            const presentColumn = allColumnDetails.find((columnDetail) => columnDetail.displayName === formattedDisplayName);
+            if (presentColumn) {
+                presentColumn.presentTables.push(table.displayName);
+            }
+            else {
+                allColumnDetails.push({
+                    name: column.name,
+                    selected: setSelected,
+                    presentTables: [table.displayName],
+                    selectable: setSelected,
+                    tableName: table.displayName,
+                    displayName: formattedDisplayName,
+                    textFiltered: true,
+                    fieldType: column.fieldType,
+                });
+            }
+        });
+        return allColumnDetails;
+    }, initialState);
+    return formattedData;
+}
+// THIS FUNCTION IS A CURRENTLY NOT IN USE BUT IS A STRONG EXAMPLE OF AUTOMATED JOINS
+export function columnGrouping(tableInfo) {
+    const tableMap = {};
+    tableInfo.forEach((table) => {
+        tableMap[table.displayName] = [];
+    });
+    tableInfo.forEach((table) => {
+        tableMap[table.displayName]?.push(table.displayName);
+        table.columns.forEach((column) => {
+            if (column.name.endsWith('_id')) {
+                const otherTable = column.name.replace('_id', '') + 's';
+                const possibleTable = column.name.replace('_id', '');
+                if (tableMap[table.displayName]) {
+                    tableMap[table.displayName]?.push(otherTable);
+                    tableMap[table.displayName]?.push(possibleTable);
+                    tableMap[otherTable]?.push(table.displayName);
+                    tableMap[possibleTable]?.push(table.displayName);
+                }
+            }
+        });
+    });
+    function dfs(tableName, visited, group) {
+        group.push(tableName);
+        visited[tableName] = true;
+        tableMap[tableName]?.forEach((table) => {
+            if (!visited[table]) {
+                dfs(table, visited, group);
+            }
+        });
+    }
+    // perform a depth first search to create a grouping of tables that can be selected all together
+    const visited = {};
+    const groups = [];
+    const tableNames = Object.keys(tableMap);
+    let i = 0;
+    tableNames.forEach((table) => {
+        if (!visited[table]) {
+            groups.push([]);
+            dfs(table, visited, groups[i]);
+            i++;
+        }
+    });
+    const formattedGroups = groups.map((tableGroup) => {
+        // loop through all the columns in each table and add them to columnsFormatted
+        // if the coulmn name isn't a foreign key then format the name to be more readable. example User.id -> User Id
+        // if the column is a foreign key then format the name to be like the following. example user_id -> User Id
+        const formattedColumns = tableGroup.map((table) => {
+            const curTableInfo = tableInfo.find((tableInfo) => tableInfo.displayName === table);
+            if (curTableInfo) {
+                const columns = curTableInfo.columns.map((column) => {
+                    if (column.name.endsWith('_id')) {
+                        return {
+                            displayName: singularize(deSnakeOrCamelCase(column.name)),
+                            tableName: curTableInfo.displayName,
+                            name: column.name,
+                        };
+                    }
+                    return {
+                        displayName: singularize(deSnakeOrCamelCase(table)) +
+                            ' ' +
+                            deSnakeOrCamelCase(column.name),
+                        tableName: curTableInfo.displayName,
+                        name: column.name,
+                    };
+                });
+                return columns;
+            }
+            return [];
+        });
+        // if there are multiple objects with the same name then flatten the array and remove duplicates by name
+        const formattedColumnsFlat = formattedColumns.flat().filter((column, i) => {
+            return (formattedColumns
+                .flat()
+                .findIndex((c) => c.displayName === column.displayName) === i);
+        });
+        const formattedColumnsFlatNames = formattedColumnsFlat.map((column) => {
+            return {
+                displayName: column.displayName,
+                selected: false,
+                group: tableGroup.join('_'),
+                selectable: true,
+                tableName: column.tableName,
+                name: column.name,
+                textFiltered: true,
+            };
+        });
+        return formattedColumnsFlatNames;
+    });
+    return formattedGroups.flat();
+}

package/dist/utils/textFormatting.d.ts

@@ -0,0 +1,4 @@
+export declare function capitalize(str: string): string;
+export declare function singularize(str: string): string;
+export declare function deSnakeOrCamelCase(value: string): string;
+//# sourceMappingURL=textFormatting.d.ts.map

package/dist/utils/textFormatting.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textFormatting.d.ts","sourceRoot":"","sources":["../../src/utils/textFormatting.ts"],"names":[],"mappings":"AAAA,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAE9C;AAGD,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAO/C;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAsBxD"}

package/dist/utils/textFormatting.js

@@ -0,0 +1,38 @@
+export function capitalize(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+// create a function that removes pluralization
+export function singularize(str) {
+    if (str.endsWith('ies')) {
+        return str.slice(0, str.length - 3) + 'y';
+    }
+    else if (str.endsWith('s')) {
+        return str.slice(0, str.length - 1);
+    }
+    return str;
+}
+export function deSnakeOrCamelCase(value) {
+    if (value.toLowerCase() === 'id') {
+        return 'ID';
+    }
+    let splitVals = [];
+    if (/_/.test(value)) {
+        splitVals = value.split('_');
+    }
+    else if (/[a-z][A-Z]/.test(value)) {
+        splitVals = value.split(/(?=[A-Z])/);
+    }
+    if (splitVals.length > 0) {
+        splitVals.forEach((val, index) => {
+            console.log(val);
+            if (val.toLowerCase() === 'id') {
+                splitVals[index] = 'ID';
+            }
+            else {
+                splitVals[index] = capitalize(val);
+            }
+        });
+        return splitVals.join(' ');
+    }
+    return capitalize(value);
+}