@quillsql/react 2.11.5 → 2.11.8

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

@@ -23,38 +23,8 @@ const QuillHover = () => {
   }
 ` }));
 };
-export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivotColumnField, pivotValueField, setPivotValueField, pivotAggregation, setPivotAggregation, popUpTitle, setPopUpTitle, selectedTable, SelectComponent, ButtonComponent, PopoverComponent, HeaderComponent, LabelComponent, TextComponent, selectedPivotIndex, setSelectedPivotIndex, removePivot, selectPivot, showUpdatePivot, setShowUpdatePivot, data, columns, theme, isOpen, setIsOpen, dateRange, createdPivots, setCreatedPivots, recommendedPivots, setRecommendedPivots, triggerButtonText = 'Pivot', showPivotEditButton = false, showEditOnPivotClick = true, selectPivotOnEdit = false, showTrigger = true, rightAlign = false, parentRef, }) => {
+export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivotColumnField, pivotValueField, setPivotValueField, pivotAggregation, setPivotAggregation, popUpTitle, setPopUpTitle, selectedTable, SelectComponent, ButtonComponent, PopoverComponent, HeaderComponent, LabelComponent, TextComponent, selectedPivotIndex, setSelectedPivotIndex, removePivot, selectPivot, showUpdatePivot, setShowUpdatePivot, data, columns, theme, isOpen, setIsOpen, dateRange, createdPivots, setCreatedPivots, recommendedPivots, setRecommendedPivots, triggerButtonText = 'Pivot', showPivotEditButton = false, showEditOnPivotClick = true, selectPivotOnEdit = false, showTrigger = true, rightAlign = false, parentRef, recommendPivotCount = 6, }) => {
     const [isLoading, setIsLoading] = useState(false);
-    // for testing
-    //   const [createdPivots, setCreatedPivots] = useState<Pivot[]>([
-    //     {
-    //       rowField: 'created_at',
-    //       rowFieldType: 'date',
-    //       columnField: undefined,
-    //       columnFieldType: undefined,
-    //       valueField: 'amount',
-    //       aggregationType: 'sum',
-    //       title: 'sum of amount by created_at',
-    //     },
-    //     {
-    //       rowField: 'merchant',
-    //       rowFieldType: 'varchar',
-    //       columnField: 'created_at',
-    //       columnFieldType: 'date',
-    //       valueField: 'amount',
-    //       aggregationType: 'sum',
-    //       title: 'sum of amount by merchant and created_at',
-    //     },
-    //     {
-    //       rowField: 'created_at',
-    //       rowFieldType: 'date',
-    //       columnField: 'merchant',
-    //       columnFieldType: 'varchar',
-    //       valueField: 'amount',
-    //       aggregationType: 'sum',
-    //       title: 'sum of amount by created_at and merchant',
-    //     },
-    //   ]);
     const [pivotUpdateIndex, setPivotUpdateIndex] = useState(null);
     const [selectedPivotType, setSelectedPivotType] = useState('recommended');
     const [errors, setErrors] = useState([]);
@@ -176,7 +146,7 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
         };
         try {
             const resp = await getDataFromCloud(client, 'pivotai', cloudBody);
-            const recommendedPivots = resp?.data?.pivotTables || [];
+            const recommendedPivots = resp?.data?.pivotTables.slice(0, recommendPivotCount) || [];
             // for testing if needed
             // const recommendedPivots = [
             //   {
@@ -242,7 +212,7 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
         if (recommendedPivots.length === 0) {
             refreshPivots();
         }
-    }, [refreshPivots]);
+    }, []);
     const recommendedPivotTables = useMemo(() => {
         const pts = recommendedPivots.map((p) => {
             const { rows, columns } = generatePivotTable(p, data, dateRange, 6);
@@ -328,16 +298,22 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                                                 marginBottom: 5,
                                             }, 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.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) => {
+                                                            }, options: [
+                                                                { label: 'Select', value: '' },
+                                                                ...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.filter((option) => {
-                                                                return (columns.find((col) => col.field === option.value)
-                                                                    ?.format === 'string');
-                                                            }), theme: theme })] })] }), _jsxs("div", { style: {
+                                                            }, options: [
+                                                                { label: 'Select', value: '' },
+                                                                ...columnSelectOptions.filter((option) => {
+                                                                    return (columns.find((col) => col.field === option.value)
+                                                                        ?.format === 'string');
+                                                                }),
+                                                            ], theme: theme })] })] }), _jsxs("div", { style: {
                                                 display: 'flex',
                                                 flexDirection: 'row',
                                                 gap: 20,
@@ -345,20 +321,29 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                                             }, 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, { id: "pivot-row-field", value: pivotAggregation, theme: theme, onChange: (e) => {
+                                                                ? [
+                                                                    { label: 'Select', value: '' },
+                                                                    ...columnSelectOptions,
+                                                                ]
+                                                                : [
+                                                                    { label: 'Select', value: '' },
+                                                                    ...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, { 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, value: option };
-                                                            }) })] })] })] }), _jsx("div", { children: _jsx(ButtonComponent, { id: "custom-button", onClick: () => {
+                                                            }, options: [
+                                                                { label: 'Select', value: '' },
+                                                                ...['sum', 'average', 'count'].map((option) => {
+                                                                    return { label: option, value: option };
+                                                                }),
+                                                            ] })] })] })] }), _jsx("div", { children: _jsx(ButtonComponent, { id: "custom-button", onClick: () => {
                                             const errors = [];
                                             if (!pivotRowField) {
                                                 errors.push('Row field cannot be empty');
@@ -386,12 +371,8 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                                             }
                                             setErrors(errors);
                                         }, label: popUpTitle }) }), _jsx("div", { children: errors.length > 0 && (_jsxs("div", { children: [_jsx("div", { style: {
-                                                    fontSize: 14,
-                                                    marginBottom: '6px',
-                                                    marginTop: '12px',
-                                                    fontWeight: '600',
-                                                    color: theme.secondaryTextColor,
-                                                }, children: "Pivot Errors" }), errors.map((error, index) => (_jsx("div", { style: {
+                                                    paddingTop: '8px',
+                                                } }), errors.map((error, index) => (_jsx("div", { style: {
                                                     borderRadius: 8,
                                                     backgroundColor: '#FF9494',
                                                     paddingLeft: '12px',
@@ -908,5 +889,15 @@ export function generatePivotTable(pivot, data, dateRange, isComparison, rowLimi
             })
             : []),
     ];
+    if (pivot.sort) {
+        pivotRows.sort((a, b) => {
+            if (pivot.sortDirection === 'ASC') {
+                return a[pivot.rowField].localeCompare(b[pivot.rowField]);
+            }
+            else {
+                return b[pivot.rowField].localeCompare(a[pivot.rowField]);
+            }
+        });
+    }
     return { rows: pivotRows, columns };
 }

package/dist/esm/utils/aggregate.js

@@ -22,12 +22,12 @@ function findTimePeriod(dateFilter) {
         else if (dateFilter.initialRange === 'LAST_30_DAYS') {
             time_span = 1000 * 60 * 60 * 24 * 30;
         }
-        else if (dateFilter.initialRange === 'CURRENT_MONTH') {
+        else if (dateFilter.initialRange === 'THIS_MONTH') {
             const now = new Date();
             const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
             time_span = now - startOfMonth;
         }
-        else if (dateFilter.initialRange === 'CURRENT_WEEK') {
+        else if (dateFilter.initialRange === 'THIS_WEEK') {
             const today = new Date();
             time_span = new Date(today.setDate(today.getDate() - today.getDay()));
         }

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

@@ -9,5 +9,30 @@ export type Color = (typeof colorValues)[number];
  * @param index the index of this element in colors
  */
 export declare function selectColor(element: any, colors: string[], index: number): string;
+export declare function namedColorToHex(color: string): string;
+/**
+ * Converts an RGB color value to HSL. Conversion formula
+ * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
+ * Assumes r, g, and b are contained in the set [0, 255] and
+ * returns h, s, and l in the set [0, 1].
+ *
+ * @param   Number  r       The red color value
+ * @param   Number  g       The green color value
+ * @param   Number  b       The blue color value
+ * @return  Array           The HSL representation
+ */
+export declare function rgbToHsl(r: any, g: any, b: any): number[];
+/**
+ * Converts an HSL color value to RGB. Conversion formula
+ * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
+ * Assumes h, s, and l are contained in the set [0, 1] and
+ * returns r, g, and b in the set [0, 255].
+ *
+ * @param   Number  h       The hue
+ * @param   Number  s       The saturation
+ * @param   Number  l       The lightness
+ * @return  Array           The RGB representation
+ */
+export declare function HSLtoRGB(h: any, s: any, l: any): number[];
 export {};
 //# sourceMappingURL=color.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../src/utils/color.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,WAAW,mKAkBP,CAAC;AAEX,MAAM,MAAM,KAAK,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAEjD;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,UAuBxE"}
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../src/utils/color.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,WAAW,mKAkBP,CAAC;AAEX,MAAM,MAAM,KAAK,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAEjD;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,UAuBxE;AAyDD,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,UAK5C;AAwJD;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,YA4B9C;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,YAuB9C"}

package/dist/esm/utils/color.js

@@ -98,6 +98,12 @@ function toGrayscale(rgba) {
     const avg = (sum / 3).toFixed(2);
     return `rgb(${avg}, ${avg}, ${avg})`;
 }
+export function namedColorToHex(color) {
+    if (Object.keys(COLOR_TO_HEX).includes(color)) {
+        return COLOR_TO_HEX[color];
+    }
+    return color;
+}
 /**
  * A comprehensive map of all the CSS named-colors that modern browsers will
  * recognize, and converts them into their hex values.
@@ -245,3 +251,157 @@ const COLOR_TO_HEX = {
     yellow: '#ffff00',
     yellowgreen: '#9acd32',
 };
+/**
+ * Converts an RGB color value to HSL. Conversion formula
+ * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
+ * Assumes r, g, and b are contained in the set [0, 255] and
+ * returns h, s, and l in the set [0, 1].
+ *
+ * @param   Number  r       The red color value
+ * @param   Number  g       The green color value
+ * @param   Number  b       The blue color value
+ * @return  Array           The HSL representation
+ */
+export function rgbToHsl(r, g, b) {
+    (r /= 255), (g /= 255), (b /= 255);
+    var max = Math.max(r, g, b), min = Math.min(r, g, b);
+    var h = (max + min) / 2;
+    var s = (max + min) / 2;
+    var l = (max + min) / 2;
+    if (max == min) {
+        h = s = 0; // achromatic
+    }
+    else {
+        var d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+            case r:
+                h = (g - b) / d + (g < b ? 6 : 0);
+                break;
+            case g:
+                h = (b - r) / d + 2;
+                break;
+            case b:
+                h = (r - g) / d + 4;
+                break;
+        }
+        h /= 6;
+    }
+    return [h, s, l];
+}
+/**
+ * Converts an HSL color value to RGB. Conversion formula
+ * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
+ * Assumes h, s, and l are contained in the set [0, 1] and
+ * returns r, g, and b in the set [0, 255].
+ *
+ * @param   Number  h       The hue
+ * @param   Number  s       The saturation
+ * @param   Number  l       The lightness
+ * @return  Array           The RGB representation
+ */
+export function HSLtoRGB(h, s, l) {
+    var r, g, b;
+    if (s == 0) {
+        r = g = b = l; // achromatic
+    }
+    else {
+        const hue2rgb = (p, q, t) => {
+            if (t < 0)
+                t += 1;
+            if (t > 1)
+                t -= 1;
+            if (t < 1 / 6)
+                return p + (q - p) * 6 * t;
+            if (t < 1 / 2)
+                return q;
+            if (t < 2 / 3)
+                return p + (q - p) * (2 / 3 - t) * 6;
+            return p;
+        };
+        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        var p = 2 * l - q;
+        r = hue2rgb(p, q, h + 1 / 3);
+        g = hue2rgb(p, q, h);
+        b = hue2rgb(p, q, h - 1 / 3);
+    }
+    return [r * 255, g * 255, b * 255];
+}
+/**
+ * Converts an RGB color value to HSV. Conversion formula
+ * adapted from http://en.wikipedia.org/wiki/HSV_color_space.
+ * Assumes r, g, and b are contained in the set [0, 255] and
+ * returns h, s, and v in the set [0, 1].
+ *
+ * @param   Number  r       The red color value
+ * @param   Number  g       The green color value
+ * @param   Number  b       The blue color value
+ * @return  Array           The HSV representation
+ */
+function rgbToHsv(r, g, b) {
+    (r = r / 255), (g = g / 255), (b = b / 255);
+    var max = Math.max(r, g, b), min = Math.min(r, g, b);
+    var h = max;
+    var s = max;
+    var v = max;
+    var d = max - min;
+    s = max == 0 ? 0 : d / max;
+    if (max == min) {
+        h = 0; // achromatic
+    }
+    else {
+        switch (max) {
+            case r:
+                h = (g - b) / d + (g < b ? 6 : 0);
+                break;
+            case g:
+                h = (b - r) / d + 2;
+                break;
+            case b:
+                h = (r - g) / d + 4;
+                break;
+        }
+        h /= 6;
+    }
+    return [h, s, v];
+}
+/**
+ * Converts an HSV color value to RGB. Conversion formula
+ * adapted from http://en.wikipedia.org/wiki/HSV_color_space.
+ * Assumes h, s, and v are contained in the set [0, 1] and
+ * returns r, g, and b in the set [0, 255].
+ *
+ * @param   Number  h       The hue
+ * @param   Number  s       The saturation
+ * @param   Number  v       The value
+ * @return  Array           The RGB representation
+ */
+function hsvToRgb(h, s, v) {
+    var r, g, b;
+    var i = Math.floor(h * 6);
+    var f = h * 6 - i;
+    var p = v * (1 - s);
+    var q = v * (1 - f * s);
+    var t = v * (1 - (1 - f) * s);
+    switch (i % 6) {
+        case 0:
+            (r = v), (g = t), (b = p);
+            break;
+        case 1:
+            (r = q), (g = v), (b = p);
+            break;
+        case 2:
+            (r = p), (g = v), (b = t);
+            break;
+        case 3:
+            (r = p), (g = q), (b = v);
+            break;
+        case 4:
+            (r = t), (g = p), (b = v);
+            break;
+        case 5:
+            (r = v), (g = p), (b = q);
+            break;
+    }
+    return [r * 255, g * 255, b * 255];
+}

package/package.json

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