@quillsql/react 2.11.5 → 2.11.8

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

@@ -26,38 +26,8 @@ const QuillHover = () => {
   }
 ` }));
 };
-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, }) => {
+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] = (0, react_1.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] = (0, react_1.useState)(null);
     const [selectedPivotType, setSelectedPivotType] = (0, react_1.useState)('recommended');
     const [errors, setErrors] = (0, react_1.useState)([]);
@@ -179,7 +149,7 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
         };
         try {
             const resp = await (0, dataFetcher_1.getDataFromCloud)(client, 'pivotai', cloudBody);
-            const recommendedPivots = resp?.data?.pivotTables || [];
+            const recommendedPivots = resp?.data?.pivotTables.slice(0, recommendPivotCount) || [];
             // for testing if needed
             // const recommendedPivots = [
             //   {
@@ -245,7 +215,7 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
         if (recommendedPivots.length === 0) {
             refreshPivots();
         }
-    }, [refreshPivots]);
+    }, []);
     const recommendedPivotTables = (0, react_1.useMemo)(() => {
         const pts = recommendedPivots.map((p) => {
             const { rows, columns } = generatePivotTable(p, data, dateRange, 6);
@@ -331,16 +301,22 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
                                                 marginBottom: 5,
                                             }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(LabelComponent, { children: "Row Field" }), (0, jsx_runtime_1.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' ||
-                                                                    ChartBuilder_1.dateFormatOptions.includes(format));
-                                                            }), theme: theme })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(LabelComponent, { children: "Column Field" }), (0, jsx_runtime_1.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' ||
+                                                                        ChartBuilder_1.dateFormatOptions.includes(format));
+                                                                }),
+                                                            ], theme: theme })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(LabelComponent, { children: "Column Field" }), (0, jsx_runtime_1.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 })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                                            }, options: [
+                                                                { label: 'Select', value: '' },
+                                                                ...columnSelectOptions.filter((option) => {
+                                                                    return (columns.find((col) => col.field === option.value)
+                                                                        ?.format === 'string');
+                                                                }),
+                                                            ], theme: theme })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                                 display: 'flex',
                                                 flexDirection: 'row',
                                                 gap: 20,
@@ -348,20 +324,29 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
                                             }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(LabelComponent, { children: "Value Field" }), (0, jsx_runtime_1.jsx)(SelectComponent, { id: "pivot-row-field", value: pivotValueField, onChange: (e) => {
                                                                 setPivotValueField(e === '' ? undefined : e);
                                                             }, options: pivotAggregation === 'count'
-                                                                ? columnSelectOptions
-                                                                : columnSelectOptions.filter((option) => {
-                                                                    return (option.value === '' ||
-                                                                        ChartBuilder_1.numberFormatOptions.includes(columns.find((col) => col.field === option.value)?.format));
-                                                                }), theme: theme })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(LabelComponent, { children: "Aggregation Type" }), (0, jsx_runtime_1.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 === '' ||
+                                                                            ChartBuilder_1.numberFormatOptions.includes(columns.find((col) => col.field === option.value)?.format));
+                                                                    }),
+                                                                ], theme: theme })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(LabelComponent, { children: "Aggregation Type" }), (0, jsx_runtime_1.jsx)(SelectComponent, { id: "pivot-row-field", value: pivotAggregation, theme: theme, onChange: (e) => {
                                                                 if (e !== 'count' &&
                                                                     pivotValueField &&
                                                                     !ChartBuilder_1.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 };
-                                                            }) })] })] })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ButtonComponent, { id: "custom-button", onClick: () => {
+                                                            }, options: [
+                                                                { label: 'Select', value: '' },
+                                                                ...['sum', 'average', 'count'].map((option) => {
+                                                                    return { label: option, value: option };
+                                                                }),
+                                                            ] })] })] })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ButtonComponent, { id: "custom-button", onClick: () => {
                                             const errors = [];
                                             if (!pivotRowField) {
                                                 errors.push('Row field cannot be empty');
@@ -389,12 +374,8 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
                                             }
                                             setErrors(errors);
                                         }, label: popUpTitle }) }), (0, jsx_runtime_1.jsx)("div", { children: errors.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                                    fontSize: 14,
-                                                    marginBottom: '6px',
-                                                    marginTop: '12px',
-                                                    fontWeight: '600',
-                                                    color: theme.secondaryTextColor,
-                                                }, children: "Pivot Errors" }), errors.map((error, index) => ((0, jsx_runtime_1.jsx)("div", { style: {
+                                                    paddingTop: '8px',
+                                                } }), errors.map((error, index) => ((0, jsx_runtime_1.jsx)("div", { style: {
                                                     borderRadius: 8,
                                                     backgroundColor: '#FF9494',
                                                     paddingLeft: '12px',
@@ -914,6 +895,16 @@ function generatePivotTable(pivot, data, dateRange, isComparison, rowLimit = -1,
             })
             : []),
     ];
+    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 };
 }
 exports.generatePivotTable = generatePivotTable;

package/dist/cjs/utils/aggregate.js

@@ -25,12 +25,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/cjs/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/cjs/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/cjs/utils/color.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.selectColor = void 0;
+exports.HSLtoRGB = exports.rgbToHsl = exports.namedColorToHex = exports.selectColor = void 0;
 const colorValues = [
     'red',
     'orange',
@@ -102,6 +102,13 @@ function toGrayscale(rgba) {
     const avg = (sum / 3).toFixed(2);
     return `rgb(${avg}, ${avg}, ${avg})`;
 }
+function namedColorToHex(color) {
+    if (Object.keys(COLOR_TO_HEX).includes(color)) {
+        return COLOR_TO_HEX[color];
+    }
+    return color;
+}
+exports.namedColorToHex = namedColorToHex;
 /**
  * A comprehensive map of all the CSS named-colors that modern browsers will
  * recognize, and converts them into their hex values.
@@ -249,3 +256,159 @@ 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
+ */
+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];
+}
+exports.rgbToHsl = rgbToHsl;
+/**
+ * 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
+ */
+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];
+}
+exports.HSLtoRGB = HSLtoRGB;
+/**
+ * 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/dist/esm/BarList.d.ts

@@ -14,6 +14,7 @@ export interface BarListProps extends React.HTMLAttributes<HTMLDivElement> {
     containerStyle: any;
     xAxisFormat: string;
     colors?: string[];
+    colorMap?: any;
     theme: any;
 }
 export declare function hexToRgbaWith10PercentAlpha(hex: any): string;

package/dist/esm/BarList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BarList.d.ts","sourceRoot":"","sources":["../../src/BarList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAqExC,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,cAAc,EAAE,GAAG,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,EAAE,GAAG,CAAC;CACZ;AAYD,wBAAgB,2BAA2B,CAAC,GAAG,KAAA,UAW9C;AAED,QAAA,MAAM,OAAO,qFA6dX,CAAC;AAEH,eAAe,OAAO,CAAC"}
+{"version":3,"file":"BarList.d.ts","sourceRoot":"","sources":["../../src/BarList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAqExC,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,cAAc,EAAE,GAAG,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,KAAK,EAAE,GAAG,CAAC;CACZ;AAYD,wBAAgB,2BAA2B,CAAC,GAAG,KAAA,UAW9C;AAED,QAAA,MAAM,OAAO,qFAkdX,CAAC;AAEH,eAAe,OAAO,CAAC"}

package/dist/esm/BarList.js

@@ -5,10 +5,10 @@ import React from 'react';
 import { valueFormatter } from './utils/valueFormatter';
 const getWidthsFromValues = (dataValues) => {
     let maxValue = -Infinity;
-    dataValues.forEach(value => {
+    dataValues.forEach((value) => {
         maxValue = Math.max(maxValue, value);
     });
-    return dataValues.map(value => {
+    return dataValues.map((value) => {
         if (value === 0)
             return 0;
         return Math.max((value / maxValue) * 100, 1);
@@ -34,13 +34,26 @@ export function hexToRgbaWith10PercentAlpha(hex) {
     return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 }
 const BarList = React.forwardRef((props, ref) => {
-    const { data = [], yAxisFields, xAxisField, xAxisFormat, colors, 
+    const { data = [], yAxisFields, xAxisField, xAxisFormat, colors, colorMap = {}, 
     // valueFormatter = (value: any) => value,valueFormatter
     showAnimation = true, className, containerStyle, theme, ...other } = props;
-    const widths = getWidthsFromValues(data.map(item => item[yAxisFields[0].field]));
-    const NUM_TO_SHOW = Math.floor(containerStyle?.height / 40) - 1;
+    const widths = getWidthsFromValues(data.map((item) => item[yAxisFields[0].field] ?? 0));
+    const NUM_TO_SHOW = 5;
+    if (!data || data.length === 0) {
+        return (_jsx("div", { style: {
+                display: 'flex',
+                flex: '1 0 auto',
+                height: '100%',
+                margin: 'auto',
+                justifyContent: 'center',
+                alignItems: 'center',
+                fontSize: 13,
+                color: theme.secondaryTextColor,
+                ...containerStyle,
+            }, children: "No results found for specified time period." }));
+    }
     if (yAxisFields.length > 1) {
-        const widths2 = getWidthsFromValues(data.map(item => item[yAxisFields[1].field]));
+        const widths2 = getWidthsFromValues(data.map((item) => item[yAxisFields[1].field]));
         return (_jsxs("div", { ref: ref, style: {
                 ...containerStyle,
                 // width: '100%',
@@ -67,7 +80,7 @@ const BarList = React.forwardRef((props, ref) => {
                         position: 'relative',
                         boxSizing: 'content-box',
                         width: '100%',
-                    }, children: [data.slice(0, Math.floor(NUM_TO_SHOW / 2)).map((item, idx) => {
+                    }, children: [data.slice(0, NUM_TO_SHOW).map((item, idx) => {
                             //   const Icon = item.icon;
                             const Icon = null;
                             return (_jsxs("div", { style: {
@@ -110,7 +123,8 @@ const BarList = React.forwardRef((props, ref) => {
                                                     marginBottom: '8px',
                                                     width: `${widths[idx]}%`,
                                                     transition: showAnimation ? 'all 2s' : '',
-                                                    backgroundColor: hexToRgbaWith10PercentAlpha(colors[0]),
+                                                    backgroundColor: (colorMap && colorMap[xAxisField]) ??
+                                                        hexToRgbaWith10PercentAlpha(colors[0]),
                                                     boxSizing: 'content-box',
                                                 }, children: _jsx("div", { style: {
                                                         position: 'absolute',
@@ -136,7 +150,8 @@ const BarList = React.forwardRef((props, ref) => {
                                                     marginBottom: '8px',
                                                     width: `${widths2[idx]}%`,
                                                     transition: showAnimation ? 'all 2s' : '',
-                                                    backgroundColor: hexToRgbaWith10PercentAlpha(colors[1]),
+                                                    backgroundColor: (colorMap && colorMap[xAxisField]) ??
+                                                        hexToRgbaWith10PercentAlpha(colors[1]),
                                                     boxSizing: 'content-box',
                                                 }, children: _jsx("div", { style: {
                                                         boxSizing: 'content-box',
@@ -163,64 +178,58 @@ const BarList = React.forwardRef((props, ref) => {
                         minWidth: 'min-content',
                         textAlign: 'right',
                         paddingLeft: 10,
-                    }, children: data.slice(0, NUM_TO_SHOW).map((item, idx) => (_jsx("div", { style: {
-                            boxSizing: 'content-box',
-                            display: 'flex',
-                            justifyContent: 'flex-end',
-                            alignItems: 'center',
-                            marginBottom: idx === data.length - 1 ? 0 : '8px',
-                            height: '36px',
-                        }, children: _jsx("p", { style: {
-                                color: theme?.chartLabelColor,
+                    }, children: data.slice(0, NUM_TO_SHOW).map((item, idx) => {
+                        return (_jsx("div", { style: {
                                 boxSizing: 'content-box',
-                                fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
-                                whiteSpace: 'nowrap',
-                                overflow: 'hidden',
-                                textOverflow: 'ellipsis',
-                                fontSize: theme?.fontSizeSmall || '14px',
-                            }, children: valueFormatter({
-                                value: item[yAxisFields[0].field],
-                                field: yAxisFields[0].field,
-                                fields: yAxisFields,
-                            }) }) }, item[xAxisField] + 'label' + idx))) })] }));
+                                display: 'flex',
+                                justifyContent: 'flex-end',
+                                alignItems: 'center',
+                                marginBottom: idx === data.length - 1 ? 0 : '8px',
+                                height: '36px',
+                            }, children: _jsx("p", { style: {
+                                    color: theme?.chartLabelColor,
+                                    boxSizing: 'content-box',
+                                    fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
+                                    whiteSpace: 'nowrap',
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    fontSize: theme?.fontSizeSmall || '14px',
+                                }, children: valueFormatter({
+                                    value: item[yAxisFields[0].field],
+                                    field: yAxisFields[0].field,
+                                    fields: yAxisFields,
+                                }) }) }, item[xAxisField] + 'label' + idx));
+                    }) })] }));
     }
     return (_jsx("div", { ref: ref, style: {
-            ...containerStyle,
             // width: '100%',
             boxSizing: 'content-box',
-            // height: '100%',
-            // height: hei
+            height: '100%',
             // marginLeft: 25,
             // background: 'red',
             // paddingRight: 25,
             // paddingRight: 25,
+            ...containerStyle,
         }, ...other, children: _jsxs("div", { style: {
                 display: 'flex',
                 justifyContent: 'space-between',
-                // paddingTop: 20,
-                // paddingLeft: 25,
                 boxSizing: 'content-box',
                 overflow: 'hidden',
                 width: '100%',
-            }, children: [_jsxs("div", { 
-                    //   className={twMerge(makeBarListClassName('bars'), 'relative w-full')}
-                    // className="qq-relative-w-full"
-                    style: {
-                        width: 'calc(100%)',
+                height: '100%',
+            }, children: [_jsxs("div", { style: {
+                        width: '100%',
                         boxSizing: 'content-box',
                         height: '100%',
                         position: 'relative',
                         paddingRight: 25,
                     }, children: [data.slice(0, NUM_TO_SHOW).map((item, idx) => {
-                            //   const Icon = item.icon;
-                            const Icon = null;
-                            return (_jsx("div", { 
-                                // className={`qq-flex qq-items-center qq-h-9 qq-rounded qq-mb-2`}
-                                style: {
+                            return (_jsx("div", { style: {
                                     width: `${widths[idx]}%`,
                                     transition: showAnimation ? 'all 2s' : '',
                                     boxSizing: 'content-box',
-                                    backgroundColor: hexToRgbaWith10PercentAlpha(colors[0]),
+                                    backgroundColor: (colorMap && colorMap[xAxisField]) ??
+                                        hexToRgbaWith10PercentAlpha(colors[0]),
                                     display: 'flex',
                                     alignItems: 'center',
                                     height: '36px',
@@ -241,7 +250,7 @@ const BarList = React.forwardRef((props, ref) => {
                                             fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
                                             fontSize: theme?.fontSizeSmall || '14px',
                                         }, children: valueFormatter({
-                                            value: item[xAxisField],
+                                            value: item[xAxisField] ?? item[`comparison_${xAxisField}`],
                                             field: xAxisField,
                                             fields: [{ field: xAxisField, format: xAxisFormat }],
                                         }) }) }) }, item[xAxisField] + 'label' + idx));
@@ -271,7 +280,7 @@ const BarList = React.forwardRef((props, ref) => {
                                 textOverflow: 'ellipsis',
                                 fontSize: theme?.fontSizeSmall || '14px',
                             }, children: valueFormatter({
-                                value: item[yAxisFields[0].field],
+                                value: item[yAxisFields[0].field] ?? 0,
                                 field: yAxisFields[0].field,
                                 fields: yAxisFields,
                             }) }) }, item[xAxisField] + 'value' + idx))) })] }) }));

package/dist/esm/Chart.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { QuillTheme } from './QuillProvider';
 interface BaseChartProps {
     colors?: string[];
     containerStyle?: React.CSSProperties;
@@ -14,6 +15,9 @@ interface BaseChartProps {
     customComparisonColor?: string;
     dateRangeFilterDisabled?: boolean;
     singlePointStyle?: 'dot' | 'line';
+    mapColorsToFields?: (_dashboardItem: DashboardItem, _theme: QuillTheme) => {
+        [key: string]: string;
+    };
 }
 interface WithChartId extends BaseChartProps {
     chartId: string;

package/dist/esm/Chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart.tsx"],"names":[],"mappings":";AA4BA,UAAU,cAAc;IACtB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,gBAAgB,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;CACnC;AAED,UAAU,WAAY,SAAQ,cAAc;IAC1C,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,WAAW,GACnB,cAAc,GACd,mBAAmB,GACnB,oBAAoB,GACpB,eAAe,GACf,cAAc,GACd,UAAU,GACV,aAAa,GACb,eAAe,GACf,oBAAoB,GACpB,UAAU,GACV,SAAS,GACT,QAAQ,CAAC;AAEb,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,UAAU,UAAW,SAAQ,cAAc;IACzC,MAAM,EAAE,aAAa,GAAG,GAAG,CAAC;CAC7B;AAED,KAAK,UAAU,GAAG,WAAW,GAAG,UAAU,CAAC;AA+D3C,wBAAgB,gBAAgB,CAAC,aAAa,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,WAQhE;AAKD,QAAA,MAAM,KAAK,SAAU,UAAU,4CAqC9B,CAAC;AAmfF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAgB7C,UAAU,cAAc;IACtB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,gBAAgB,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAClC,iBAAiB,CAAC,EAAE,CAClB,cAAc,EAAE,aAAa,EAC7B,MAAM,EAAE,UAAU,KACf;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;CAChC;AAED,UAAU,WAAY,SAAQ,cAAc;IAC1C,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,WAAW,GACnB,cAAc,GACd,mBAAmB,GACnB,oBAAoB,GACpB,eAAe,GACf,cAAc,GACd,UAAU,GACV,aAAa,GACb,eAAe,GACf,oBAAoB,GACpB,UAAU,GACV,SAAS,GACT,QAAQ,CAAC;AAEb,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,UAAU,UAAW,SAAQ,cAAc;IACzC,MAAM,EAAE,aAAa,GAAG,GAAG,CAAC;CAC7B;AAED,KAAK,UAAU,GAAG,WAAW,GAAG,UAAU,CAAC;AA+D3C,wBAAgB,gBAAgB,CAAC,aAAa,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,WAQhE;AAaD,QAAA,MAAM,KAAK,SAAU,UAAU,4CAsC9B,CAAC;AA0fF,eAAe,KAAK,CAAC"}