@quillsql/react 2.11.5 → 2.11.8

package/dist/cjs/SQLEditor.js

@@ -13,7 +13,7 @@ const react_2 = __importDefault(require("@monaco-editor/react"));
 const Context_1 = require("./Context");
 const QuillTable_1 = __importDefault(require("./components/QuillTable"));
 const dataFetcher_1 = require("./utils/dataFetcher");
-const ChartBuilder_1 = __importDefault(require("./ChartBuilder"));
+const ChartBuilder_1 = require("./ChartBuilder");
 function convertPostgresColumn(column) {
     let format;
     let fieldType;
@@ -129,7 +129,7 @@ const QuillButton = ({ onClick, label, theme, secondary, }) => ((0, jsx_runtime_
         fontFamily: theme?.fontFamily,
         height: 38,
     }, onClick: onClick, children: label }));
-const QuillTextInput = ({ onChange, value, id, placeholder, theme, }) => {
+const QuillTextInput = ({ onChange, value, id, placeholder, theme, style = {}, }) => {
     return ((0, jsx_runtime_1.jsx)("input", { style: {
             display: 'flex',
             flexDirection: 'row',
@@ -146,9 +146,10 @@ const QuillTextInput = ({ onChange, value, id, placeholder, theme, }) => {
             borderColor: theme?.borderColor || '#E7E7E7',
             borderStyle: 'solid',
             borderRadius: '6px',
+            ...style
         }, id: id, onChange: onChange, value: value, placeholder: placeholder }));
 };
-function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent, SecondaryButtonComponent, TextInputComponent, TableComponent = QuillTable_1.default, newQueryEnabled = false, LoadingComponent, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isEditMode = false, chartBuilderEnabled = false, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel = 'Add to dashboard', dashboardItem = undefined, organizationName = undefined, }) {
+function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent, SecondaryButtonComponent, TextInputComponent, TableComponent = QuillTable_1.default, newQueryEnabled = false, LoadingComponent, ModalComponent, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isEditMode = false, chartBuilderEnabled = false, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel = 'Add to dashboard', dashboardItem = undefined, organizationName = undefined, chartBuilderHorizontalView = false, }) {
     const [sqlPrompt, setSqlPrompt] = (0, react_1.useState)('');
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const [client] = (0, react_1.useContext)(Context_1.ClientContext);
@@ -276,7 +277,8 @@ function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent, Se
         }
     }, [query]);
     /* rest of your methods */
-    return ((0, jsx_runtime_1.jsxs)("div", { style: containerStyle, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: containerStyle, children: [(!chartBuilderHorizontalView ||
+                (chartBuilderHorizontalView && !isChartBuilderOpen)) && ((0, jsx_runtime_1.jsx)("div", { style: {
                     height: '100%',
                     display: 'flex',
                     flexDirection: 'column',
@@ -300,8 +302,9 @@ function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent, Se
                                             display: 'flex',
                                             flexDirection: 'row',
                                             alignItems: 'center',
+                                            gap: '10px',
                                             height: 80,
-                                        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { minWidth: 440, marginRight: 10 }, children: (TextInputComponent && ((0, jsx_runtime_1.jsx)(TextInputComponent, { id: "ai-search", value: sqlPrompt, onChange: (e) => setSqlPrompt(e.target.value), placeholder: "Ask a question..." }))) || ((0, jsx_runtime_1.jsx)(QuillTextInput, { id: "ai-search", value: sqlPrompt, onChange: (e) => setSqlPrompt(e.target.value), placeholder: "Ask a question...", theme: theme })) }), (ButtonComponent && ((0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleRunSqlPrompt, label: "Ask AI" }))) || ((0, jsx_runtime_1.jsx)(QuillButton, { theme: theme, onClick: handleRunSqlPrompt, label: "Ask AI" }))] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 'calc(50% - 40px)' }, children: (0, jsx_runtime_1.jsx)(SQLEditorComponent, { query: query, setQuery: setQuery, handleRunQuery: handleRunQuery, newQueryEnabled: newQueryEnabled, handleClearQuery: handleClearQuery, theme: theme, defineEditorTheme: defineEditorTheme, setEditorTheme: setEditorTheme, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, loading: sqlResponseLoading, LoadingComponent: LoadingComponent }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { minWidth: 440, flexGrow: 1 }, children: (TextInputComponent && ((0, jsx_runtime_1.jsx)(TextInputComponent, { id: "ai-search", value: sqlPrompt, style: { width: '100%' }, onChange: (e) => setSqlPrompt(e.target.value), placeholder: "Ask a question..." }))) || ((0, jsx_runtime_1.jsx)(QuillTextInput, { id: "ai-search", value: sqlPrompt, style: { width: '100%' }, onChange: (e) => setSqlPrompt(e.target.value), placeholder: "Ask a question...", theme: theme })) }), (ButtonComponent && ((0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleRunSqlPrompt, label: "Ask AI" }))) || ((0, jsx_runtime_1.jsx)(QuillButton, { theme: theme, onClick: handleRunSqlPrompt, label: "Ask AI" }))] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 'calc(50% - 40px)' }, children: (0, jsx_runtime_1.jsx)(SQLEditorComponent, { query: query, setQuery: setQuery, handleRunQuery: handleRunQuery, newQueryEnabled: newQueryEnabled, handleClearQuery: handleClearQuery, theme: theme, defineEditorTheme: defineEditorTheme, setEditorTheme: setEditorTheme, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, loading: sqlResponseLoading, LoadingComponent: LoadingComponent }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             height: 'calc(50% - 108px)',
@@ -330,7 +333,7 @@ function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent, Se
                                             justifyContent: 'flex-end',
                                             width: '100%',
                                             height: '70px',
-                                        }, children: (ButtonComponent && ((0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleRunQuery, label: "Run query" }))) || ((0, jsx_runtime_1.jsx)(QuillButton, { onClick: () => setIsChartBuilderOpen(true), label: addToDashboardButtonLabel, theme: theme })) }))] })] }) }) }), (0, jsx_runtime_1.jsx)(ChartBuilder_1.default, { rows: rows, columns: columns, fields: fields, query: query, isEditMode: isEditMode, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onAddToDashboardComplete, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions, destinationDashboard: destinationDashboard, title: chartBuilderTitle, button: chartBuilderButtonLabel, buttonLabel: addToDashboardButtonLabel, dashboardItem: dashboardItem, organizationName: organizationName })] }));
+                                        }, children: (ButtonComponent && ((0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: () => setIsChartBuilderOpen(true), label: addToDashboardButtonLabel }))) || ((0, jsx_runtime_1.jsx)(QuillButton, { onClick: () => setIsChartBuilderOpen(true), label: addToDashboardButtonLabel, theme: theme })) }))] })] }) }) })), (0, jsx_runtime_1.jsx)(ChartBuilder_1.ChartBuilderWithModal, { rows: rows, columns: columns, fields: fields, query: query, horizontalView: chartBuilderHorizontalView, isEditMode: isEditMode, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onAddToDashboardComplete, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions, destinationDashboard: destinationDashboard, title: chartBuilderTitle, button: chartBuilderButtonLabel, buttonLabel: addToDashboardButtonLabel, dashboardItem: dashboardItem, organizationName: organizationName, Modal: ModalComponent, Button: ButtonComponent })] }));
 }
 exports.default = QueryEditor;
 const SQLEditorComponent = ({ query, setQuery, handleRunQuery, handleClearQuery, defineEditorTheme, setEditorTheme, ButtonComponent, SecondaryButtonComponent, newQueryEnabled, theme, loading, LoadingComponent, }) => {

package/dist/cjs/components/Chart/BarChart.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
-export default function BarChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isStacked, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, }: {
+export default function BarChart({ colors, colorMap, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isStacked, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, }: {
     colors?: string[];
+    colorMap?: any;
     yAxisFields: any[];
     data: any[];
     containerStyle?: React.CSSProperties;

package/dist/cjs/components/Chart/BarChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/BarChart.tsx"],"names":[],"mappings":";AAiBA,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,MAAM,EACN,WAAW,EACX,IAAI,EACJ,cAAc,EACd,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,SAAS,EACT,iBAAwB,EACxB,SAAiB,EACjB,SAAiB,EACjB,iBAAyB,GAC1B,EAAE;IACD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,WAAW,EAAE,GAAG,EAAE,CAAC;IACnB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;CAC5B,2CAkKA"}
+{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/BarChart.tsx"],"names":[],"mappings":";AAiBA,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,MAAM,EACN,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,cAAc,EACd,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,SAAS,EACT,iBAAwB,EACxB,SAAiB,EACjB,SAAiB,EACjB,iBAAyB,GAC1B,EAAE;IACD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,WAAW,EAAE,GAAG,EAAE,CAAC;IACnB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;CAC5B,2CAwKA"}

package/dist/cjs/components/Chart/BarChart.js

@@ -12,7 +12,7 @@ const color_1 = require("../../utils/color");
 const ChartTooltip_1 = __importDefault(require("../../components/Chart/ChartTooltip"));
 const getDomain_1 = __importDefault(require("../../utils/getDomain"));
 const react_1 = require("react");
-function BarChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isStacked, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, }) {
+function BarChart({ colors, colorMap, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isStacked, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, }) {
     const [formattedData, setFormattedData] = (0, react_1.useState)([]);
     (0, react_1.useEffect)(() => {
         if (!data || data.length === 0) {
@@ -38,11 +38,12 @@ function BarChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxis
                 alignItems: 'center',
                 fontSize: 13,
                 color: theme.secondaryTextColor,
+                ...containerStyle,
             }, children: "No results found for specified time period." }));
     }
     return ((0, jsx_runtime_1.jsx)("div", { style: {
-            ...containerStyle,
             boxSizing: 'content-box',
+            ...containerStyle,
         }, children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: '100%', children: (0, jsx_runtime_1.jsxs)(recharts_1.BarChart, { data: formattedData, layout: 'horizontal', children: [!hideCartesianGrid && ((0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, { horizontal: true, vertical: false, stroke: "#e5e7eb" })), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { width: 44, hide: hideYAxis, axisLine: false, tickLine: false, type: "number", domain: (0, getDomain_1.default)(data, yAxisFields), tick: { transform: 'translate(-3, 0)' }, style: {
                             fontSize: '12px',
                             fontFamily: theme.chartLabelFontFamily,
@@ -74,8 +75,11 @@ function BarChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxis
                                     field: payload[0].dataKey,
                                     fields: yAxisFields,
                                 }), xAxisFormat: xAxisFormat, xAxisField: xAxisField, colors: colors }));
-                        }, position: { y: 0 } }), yAxisFields.map((elem) => ((0, jsx_runtime_1.jsx)(recharts_1.Bar, { name: elem.label, dataKey: elem.field, stackId: isStacked &&
-                            (elem.field?.replace('comparison_', '') ??
-                                'unknown'), type: "linear", fill: (0, color_1.selectColor)(elem, colors, yAxisFields.findIndex((field) => field.field === elem.field?.replace('comparison_', ''))), isAnimationActive: isAnimationActive }, elem.field)))] }) }) }));
+                        }, position: { y: 0 } }), yAxisFields.map((elem) => {
+                        return ((0, jsx_runtime_1.jsx)(recharts_1.Bar, { name: elem.label, dataKey: elem.field, stackId: isStacked &&
+                                (elem.field?.replace('comparison_', '') ??
+                                    'unknown'), type: "linear", fill: (colorMap && colorMap[elem.field]) ??
+                                (0, color_1.selectColor)(elem, colors, yAxisFields.findIndex((field) => field.field === elem.field?.replace('comparison_', ''))), isAnimationActive: isAnimationActive }, elem.field));
+                    })] }) }) }));
 }
 exports.default = BarChart;

package/dist/cjs/components/Chart/ChartError.js

@@ -6,9 +6,9 @@ const Context_1 = require("../../Context");
 function ChartError({ containerStyle }) {
     const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
     return ((0, jsx_runtime_1.jsx)("div", { style: {
-            ...containerStyle,
             boxSizing: 'content-box',
             height: '100%',
+            ...containerStyle,
         }, children: (0, jsx_runtime_1.jsx)("div", { style: {
                 height: containerStyle?.height,
                 width: '100%',

package/dist/cjs/components/Chart/ChartSkeleton.js

@@ -6,11 +6,11 @@ const Context_1 = require("../../Context");
 function ChartSkeleton({ containerStyle }) {
     const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
     return ((0, jsx_runtime_1.jsx)("div", { style: {
-            ...containerStyle,
             boxSizing: 'content-box',
             height: '100%',
+            ...containerStyle,
         }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                height: containerStyle?.height,
+                height: '100%',
                 width: '100%',
                 boxSizing: 'content-box',
                 borderRadius: 8,

package/dist/cjs/components/Chart/LineChart.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
-export default function LineChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, dashedComparison, customPrimaryColor, customComparisonColor, singlePointStyle, }: {
+export default function LineChart({ colors, colorMap, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, dashedComparison, customPrimaryColor, customComparisonColor, singlePointStyle, }: {
     colors?: string[];
+    colorMap?: any;
     yAxisFields: any[];
     data: any[];
     containerStyle?: React.CSSProperties;

package/dist/cjs/components/Chart/LineChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/LineChart.tsx"],"names":[],"mappings":";AAiBA,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,MAAM,EACN,WAAW,EACX,IAAI,EACJ,cAAc,EACd,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,iBAAwB,EACxB,SAAiB,EACjB,SAAiB,EACjB,iBAAyB,EACzB,gBAAwB,EACxB,kBAA8B,EAC9B,qBAAiC,EACjC,gBAAwB,GACzB,EAAE;IACD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,WAAW,EAAE,GAAG,EAAE,CAAC;IACnB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,EAAE,GAAG,CAAC;IAChB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,kBAAkB,EAAE,MAAM,GAAG,SAAS,CAAC;IACvC,qBAAqB,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1C,gBAAgB,EAAE,KAAK,GAAG,MAAM,CAAC;CAClC,kDAyNA"}
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/LineChart.tsx"],"names":[],"mappings":";AAiBA,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,MAAM,EACN,QAAa,EACb,WAAW,EACX,IAAI,EACJ,cAAc,EACd,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,iBAAwB,EACxB,SAAiB,EACjB,SAAiB,EACjB,iBAAyB,EACzB,gBAAwB,EACxB,kBAA8B,EAC9B,qBAAiC,EACjC,gBAAwB,GACzB,EAAE;IACD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,WAAW,EAAE,GAAG,EAAE,CAAC;IACnB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,EAAE,GAAG,CAAC;IAChB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,kBAAkB,EAAE,MAAM,GAAG,SAAS,CAAC;IACvC,qBAAqB,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1C,gBAAgB,EAAE,KAAK,GAAG,MAAM,CAAC;CAClC,kDAkOA"}

package/dist/cjs/components/Chart/LineChart.js

@@ -12,7 +12,7 @@ const color_1 = require("../../utils/color");
 const ChartTooltip_1 = __importDefault(require("../../components/Chart/ChartTooltip"));
 const getDomain_1 = __importDefault(require("../../utils/getDomain"));
 const react_1 = require("react");
-function LineChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, dashedComparison = false, customPrimaryColor = undefined, customComparisonColor = undefined, singlePointStyle = 'dot', }) {
+function LineChart({ colors, colorMap = {}, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, dashedComparison = false, customPrimaryColor = undefined, customComparisonColor = undefined, singlePointStyle = 'dot', }) {
     const [formattedData, setFormattedData] = (0, react_1.useState)([]);
     if (!yAxisFields || !yAxisFields.length) {
         return null;
@@ -48,16 +48,21 @@ function LineChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxi
                 alignItems: 'center',
                 fontSize: 13,
                 color: theme.secondaryTextColor,
+                ...containerStyle,
             }, children: "No results found for specified time period." }));
     }
     // Allows the users to override the color scheme on a per-chart basis.
-    const getCustomColor = (index) => {
+    const getCustomColor = (index, field) => {
         if (index === 0 && customPrimaryColor) {
             return customPrimaryColor;
         }
         if (index === 1 && comparison && customComparisonColor) {
             return customComparisonColor;
         }
+        if (colorMap && colorMap[field]) {
+            // console.log(field, '->', colorMap[field]);
+            return colorMap[field];
+        }
         return undefined; // use the default colors from the theme
     };
     return ((0, jsx_runtime_1.jsx)("div", { style: { ...containerStyle }, children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: '100%', children: (0, jsx_runtime_1.jsxs)(recharts_1.ComposedChart, { data: formattedData, children: [!hideCartesianGrid && ((0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, { horizontal: true, vertical: false, stroke: "#e5e7eb" })), (0, jsx_runtime_1.jsx)(recharts_1.XAxis, { dataKey: xAxisField, hide: hideXAxis, tick: { transform: 'translate(0, 6)' }, style: {
@@ -104,6 +109,8 @@ function LineChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxi
                                         { field: xAxisField, format: xAxisFormat },
                                     ],
                                 }), xAxisFormat: xAxisFormat, xAxisField: xAxisField, colors: colors, theme: theme }));
-                        }, position: { y: 0 } }), yAxisFields.map((elem, index) => ((0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: `gradient${index}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "5%", stopColor: getCustomColor(index) ?? (0, color_1.selectColor)(elem, colors, index), stopOpacity: 0.4 }), (0, jsx_runtime_1.jsx)("stop", { offset: "95%", stopColor: 'rgba(0,0,0,0)', stopOpacity: 0 })] }) }, `defs${elem.field + index}`))), yAxisFields.map((elem, index) => ((0, jsx_runtime_1.jsx)(recharts_1.Area, { name: elem.label, type: "linear", dataKey: elem.field, stroke: getCustomColor(index) ?? (0, color_1.selectColor)(elem, colors, index), fill: `url(#gradient${index})`, strokeWidth: 2, dot: false, strokeDasharray: comparison && dashedComparison && index > 0 ? '5 5' : undefined, isAnimationActive: isAnimationActive }, elem.field)))] }) }) }));
+                        }, position: { y: 0 } }), yAxisFields.map((elem, index) => ((0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: `gradient${elem.field}${index}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "5%", stopColor: getCustomColor(index, elem.field) ??
+                                        (0, color_1.selectColor)(elem, colors, index), stopOpacity: 0.4 }), (0, jsx_runtime_1.jsx)("stop", { offset: "95%", stopColor: 'rgba(0,0,0,0)', stopOpacity: 0 })] }) }, `defs${elem.field + index}`))), yAxisFields.map((elem, index) => ((0, jsx_runtime_1.jsx)(recharts_1.Area, { name: elem.label, type: "linear", dataKey: elem.field, stroke: getCustomColor(index, elem.field) ??
+                            (0, color_1.selectColor)(elem, colors, index), fill: `url(#gradient${elem.field}${index})`, strokeWidth: 2, dot: false, strokeDasharray: comparison && dashedComparison && index > 0 ? '5 5' : undefined, isAnimationActive: isAnimationActive }, elem.field)))] }) }) }));
 }
 exports.default = LineChart;

package/dist/cjs/components/Dashboard/TableComponent.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-export default function DashboardItem({ dashboardItem, onClickDashboardItem, theme, style, children, }: any): JSX.Element;
+export default function DashboardItem({ dashboardItem, onClickDashboardItem, isLoading, theme, style, children, }: any): JSX.Element;
 //# sourceMappingURL=TableComponent.d.ts.map

package/dist/cjs/components/Dashboard/TableComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/TableComponent.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,aAAa,EACb,oBAAoB,EACpB,KAAK,EACL,KAAK,EACL,QAAQ,GACT,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CA8DnB"}
+{"version":3,"file":"TableComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/TableComponent.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,aAAa,EACb,oBAAoB,EACpB,SAAS,EACT,KAAK,EACL,KAAK,EACL,QAAQ,GACT,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CA8DnB"}

package/dist/cjs/components/Dashboard/TableComponent.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function DashboardItem({ dashboardItem, onClickDashboardItem, theme, style, children, }) {
+function DashboardItem({ dashboardItem, onClickDashboardItem, isLoading, theme, style, children, }) {
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             cursor: 'pointer',
             ...style,

package/dist/cjs/components/QuillTable.js

@@ -65,7 +65,7 @@ function QuillTable({ rows, columns, loading, showDownloadCSVButton, downloadFil
     return ((0, jsx_runtime_1.jsx)("div", { style: {
             width: '100%',
             height: '100%',
-            overflow: 'visible',
+            overflow: 'auto',
             display: 'flex',
             flexDirection: 'column',
             ...containerStyle,

package/dist/cjs/components/ReportBuilder/AddColumnPopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddColumnPopover.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/AddColumnPopover.tsx"],"names":[],"mappings":"AAoBA,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,MAAM,EACN,kBAAkB,EAClB,qBAAqB,EACrB,eAAe,EACf,kBAAkB,EAClB,oBAAoB,EACpB,aAAa,EACb,YAAY,EACZ,OAAO,EACP,UAAU,EACV,KAAK,EACL,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,eAAe,EACf,MAAM,EACN,YAAY,GACb,EAAE,GAAG,2CAiML"}
+{"version":3,"file":"AddColumnPopover.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/AddColumnPopover.tsx"],"names":[],"mappings":"AAoBA,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,MAAM,EACN,kBAAkB,EAClB,qBAAqB,EACrB,eAAe,EACf,kBAAkB,EAClB,oBAAoB,EACpB,aAAa,EACb,YAAY,EACZ,OAAO,EACP,UAAU,EACV,KAAK,EACL,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,eAAe,EACf,MAAM,EACN,YAAY,GACb,EAAE,GAAG,2CAgML"}

package/dist/cjs/components/ReportBuilder/AddColumnPopover.js

@@ -65,7 +65,7 @@ function AddColumnPopover({ onSave, orderedColumnNames, setOrderedColumnNames, s
                 }, children: [selectedColumns.length > 0 && !isSelectedAllColumns() && ((0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => setSelectedColumns(orderedColumnNames.filter((row) => {
                             const [table, _column] = row.split('.');
                             return selectedColumns[0].startsWith(table);
-                        })), children: "Select all" })), selectedColumns.length > 0 && isSelectedAllColumns() && ((0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => setSelectedColumns([]), children: "Clear" })), (0, jsx_runtime_1.jsx)(Button, { onMouseUp: () => {
+                        })), label: "Select all" })), selectedColumns.length > 0 && isSelectedAllColumns() && ((0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => setSelectedColumns([]), label: "Clear" })), (0, jsx_runtime_1.jsx)(Button, { onClick: () => {
                             // follow the ordering of the ordered column names
                             let tableName = initialTableName;
                             const orderedSelectedColumns = [];
@@ -105,7 +105,7 @@ function AddColumnPopover({ onSave, orderedColumnNames, setOrderedColumnNames, s
                                 setPivot(null);
                             }
                             onSave();
-                        }, children: "Save" })] })] }));
+                        }, label: "Save" })] })] }));
 }
 exports.default = AddColumnPopover;
 const SortableItem = ({ id, label, setSelectedColumns, theme, selectedColumns, SelectColumn, HandleButton, }) => {

package/dist/cjs/components/ReportBuilder/AddSortPopover.d.ts

@@ -0,0 +1,3 @@
+export declare const SortSentence: ({ sortData, keyPrefix, columns, handleDelete, setEditPopoverKey, setOpenPopover, setActiveEditItem, setIsPending, setActivePath, onSave, popoverTitle, SortPopover, EditPopover, children, }: any) => import("react/jsx-runtime").JSX.Element | undefined;
+export declare const AddSortPopover: ({ onSave, columns, isEdit, onDelete, column, }: any) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AddSortPopover.d.ts.map

package/dist/cjs/components/ReportBuilder/AddSortPopover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddSortPopover.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/AddSortPopover.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,YAAY,iMAetB,GAAG,wDA2CL,CAAC;AAEF,eAAO,MAAM,cAAc,mDAMxB,GAAG,4CAuDL,CAAC"}

package/dist/cjs/components/ReportBuilder/AddSortPopover.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AddSortPopover = exports.SortSentence = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ui_1 = require("./ui");
+const UiComponents_1 = require("../UiComponents");
+const SORT_VALUE_TO_LABEL = {
+    ASC: 'ascending',
+    DESC: 'descending',
+};
+const SortSentence = ({ sortData, keyPrefix, columns, handleDelete, setEditPopoverKey, setOpenPopover, setActiveEditItem, setIsPending, setActivePath, onSave, popoverTitle = 'Edit Sort', SortPopover, EditPopover, children, }) => {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const handleClickDelete = (e) => {
+        e.stopPropagation(); // don't call onClick handler
+        setIsPending(false);
+        handleDelete(keyPrefix);
+        setActiveEditItem(null);
+        setOpenPopover(null);
+        setEditPopoverKey(null);
+    };
+    if (!sortData && (!sortData.expr.column || !sortData.expr.value)) {
+        return;
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { style: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(SortPopover
+        // @ts-ignore
+        , { 
+            // @ts-ignore
+            filterLabel: `${sortData.expr.column || sortData.expr.value} is ${SORT_VALUE_TO_LABEL[sortData.type]}`, onClickDelete: handleClickDelete, popoverTitle: popoverTitle, popoverChildren: (0, jsx_runtime_1.jsx)(EditPopover, { onSave: (column, direction) => {
+                    setIsOpen(false);
+                    onSave(column, direction);
+                }, columns: columns, isEdit: true, onDelete: handleClickDelete, column: sortData.expr.column || sortData.expr.value }), isOpen: isOpen, setIsOpen: setIsOpen, onDelete: () => {
+                setIsPending(false);
+                setActiveEditItem(null);
+                setActivePath(null);
+            } }) }));
+};
+exports.SortSentence = SortSentence;
+const AddSortPopover = ({ onSave, columns, isEdit, onDelete, column, }) => {
+    const [sortColumn, setSortColumn] = (0, react_1.useState)(column || '');
+    const [sortDirection, setSortDirection] = (0, react_1.useState)('ASC');
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: 12 }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, children: [(0, jsx_runtime_1.jsx)(ui_1.QuillSelect, { value: sortColumn, onChange: (value) => {
+                            setSortColumn(value);
+                        }, options: [
+                            { label: 'Select', value: '' },
+                            ...columns.map((column) => ({
+                                label: column.split('.')[1],
+                                value: column.split('.')[1],
+                            })),
+                        ] }), (0, jsx_runtime_1.jsx)(ui_1.QuillSelect, { value: sortDirection, onChange: (value) => {
+                            setSortDirection(value);
+                        }, options: [
+                            { label: 'Ascending', value: 'ASC' },
+                            { label: 'Descending', value: 'DESC' },
+                        ] })] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    justifyContent: 'end',
+                    gap: 12,
+                }, children: isEdit ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(UiComponents_1.MemoizedSecondaryButton, { onClick: onDelete, label: "Delete" }), (0, jsx_runtime_1.jsx)(UiComponents_1.MemoizedButton, { onClick: () => onSave(sortColumn, sortDirection), label: "Add sort" })] })) : ((0, jsx_runtime_1.jsx)(UiComponents_1.MemoizedButton, { onClick: () => onSave(sortColumn, sortDirection), label: "Add sort" })) })] }));
+};
+exports.AddSortPopover = AddSortPopover;

package/dist/cjs/components/ReportBuilder/convert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"convert.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/convert.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,IAAI,GAAG,EACpB,GAAG,EAMJ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAc,SAAS,EAAE,MAAM,UAAU,CAAC;AASjD,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,GAAG,CAAC,MAAM,GAAG,GAAG,CAAC,MAAM,CAuBlE;AAGD,wBAAgB,yBAAyB,CACvC,IAAI,EAAE,GAAG,EACT,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,MAAM,QAahB;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,CAAC,MAAM,CAuCpD;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CACpC,GAAG,EAAE,GAAG,CAAC,MAAM,EACf,YAAY,EAAE,SAAS,EAAE,GACxB,GAAG,CAAC,MAAM,CAwBZ;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAC5B,GAAG,EAAE,GAAG,EACR,SAAS,mBAAc,EACvB,YAAY,EAAE,SAAS,EAAE;;;;;;;;;;;EA+Y1B;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG;;;EA6G5D;AAED,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,OAuItE;AAID,wBAAgB,8BAA8B,CAAC,GAAG,EAAE,GAAG,CAAC,MAAM,GAAG,GAAG,CAAC,MAAM,CAY1E"}
+{"version":3,"file":"convert.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/convert.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,IAAI,GAAG,EACpB,GAAG,EAMJ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAc,SAAS,EAAE,MAAM,UAAU,CAAC;AASjD,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,GAAG,CAAC,MAAM,GAAG,GAAG,CAAC,MAAM,CAuBlE;AAGD,wBAAgB,yBAAyB,CACvC,IAAI,EAAE,GAAG,EACT,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,MAAM,QAahB;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,CAAC,MAAM,CAuCpD;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CACpC,GAAG,EAAE,GAAG,CAAC,MAAM,EACf,YAAY,EAAE,SAAS,EAAE,GACxB,GAAG,CAAC,MAAM,CAwBZ;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAC5B,GAAG,EAAE,GAAG,EACR,SAAS,mBAAc,EACvB,YAAY,EAAE,SAAS,EAAE;;;;;;;;;;;EAiZ1B;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG;;;EA6G5D;AAED,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,OAuItE;AAID,wBAAgB,8BAA8B,CAAC,GAAG,EAAE,GAAG,CAAC,MAAM,GAAG,GAAG,CAAC,MAAM,CAY1E"}

package/dist/cjs/components/ReportBuilder/convert.js

@@ -218,7 +218,8 @@ function convertGroupBy(ast, prevPivot = null, schemaTables) {
     // Iterate over columns to find aggr_func -> set pivot.aggregationType and pivot.valueField
     for (let i = 0; i < ast.columns.length; i++) {
         const column = ast.columns[i];
-        const field = columns.find((c) => c.field === column.expr?.args?.expr?.column);
+        const field = columns.find((c) => c.field === column.expr?.args?.expr?.column ||
+            c.field === column.expr?.args?.expr?.value);
         if (column?.expr?.type === 'aggr_func') {
             // CASE WHEN
             if (column.expr?.args?.expr?.type.toLowerCase() === 'case' &&
@@ -535,7 +536,7 @@ function applyPivot(data, pivot, schema) {
         const newFields = [
             rowFieldColumnType,
             ...columnVariants.map((name) => {
-                return { ...valueFieldColumnType, name };
+                return { ...valueFieldColumnType, name, label: name };
             }),
         ];
         for (const row of rows) {

package/dist/cjs/components/ReportBuilder/ui.d.ts

@@ -29,6 +29,7 @@ export declare const DEFAULT_TAB_OPTIONS: {
 export declare const QuillTabs: import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<unknown>>;
 export declare const EditPopover: ({ onSave, onDelete, Button, renderNode, activeEditItem, }: any) => import("react/jsx-runtime").JSX.Element;
 export declare const QuillFilterPopover: ({ filterLabel, onClickDeleteFilter, popoverTitle, popoverChildren, isOpen, setIsOpen, }: any) => import("react/jsx-runtime").JSX.Element;
+export declare const QuillSortPopover: ({ filterLabel, onClickDelete, popoverTitle, popoverChildren, isOpen, setIsOpen, }: any) => import("react/jsx-runtime").JSX.Element;
 export declare const TagWrapper: ({ isCard, isRow, editPopoverKey, keyPrefix, formData, activeEditItem, setEditPopoverKey, setActiveEditItem, setActivePath, setOpenPopover, setIsPending, clearCheckboxes, fetchSqlQuery, handleDelete, setCheckboxes, handleReplaceSubtree, FilterPopover, getByKey, EditPopover, Button, renderNode, children, }: any) => import("react/jsx-runtime").JSX.Element;
 export declare const AddFilterPopover: ({ onSave, Button, renderNode, activeEditItem, }: any) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ui.d.ts.map

package/dist/cjs/components/ReportBuilder/ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/ui.tsx"],"names":[],"mappings":";AAeA;;;;;GAKG;AAEH,eAAO,MAAM,WAAW,2BAA4B,GAAG,4CA2BtD,CAAC;AAEF,eAAO,MAAM,oBAAoB,2BAA4B,GAAG,4CA2B/D,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,GAAG,4CAuBxC,CAAC;AAEF,eAAO,MAAM,uBAAuB,uCAKjC,GAAG,4CAiBL,CAAC;AAEF,eAAO,MAAM,QAAQ,sGAoEpB,CAAC;AAGF,eAAO,MAAM,mBAAmB,cAAe,GAAG,4CAEjD,CAAC;AAGF,eAAO,MAAM,sBAAsB,cAAe,GAAG,4CAEpD,CAAC;AAGF,eAAO,MAAM,YAAY,sGAgBxB,CAAC;AAGF,eAAO,MAAM,eAAe,sGAsB3B,CAAC;AAEF,eAAO,MAAM,WAAW,2BAA4B,GAAG,4CAUtD,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,QAAQ,EACR,KAAU,EACV,OAAO,EACP,MAAM,GACP,EAAE,GAAG,2CAiDL;AAED,eAAO,MAAM,YAAY,sGAkCxB,CAAC;AAGF,eAAO,MAAM,iBAAiB,+CAwE7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,gDAK3B,GAAG,4CA6CL,CAAC;AAGF,eAAO,MAAM,oBAAoB,kCAAmC,GAAG,4CAkDtE,CAAC;AAGF,eAAO,MAAM,uBAAuB,+CAEnC,CAAC;AAGF,eAAO,MAAM,sBAAsB,+CAMlC,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;GAG/B,CAAC;AAEF,eAAO,MAAM,SAAS,sGAIrB,CAAC;AAEF,eAAO,MAAM,WAAW,8DAMrB,GAAG,4CAwBL,CAAC;AAEF,eAAO,MAAM,kBAAkB,4FAO5B,GAAG,4CAqBL,CAAC;AAEF,eAAO,MAAM,UAAU,sTAuBpB,GAAG,4CAqFL,CAAC;AAEF,eAAO,MAAM,gBAAgB,oDAK1B,GAAG,4CAeL,CAAC"}
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/ui.tsx"],"names":[],"mappings":";AAgBA;;;;;GAKG;AAEH,eAAO,MAAM,WAAW,2BAA4B,GAAG,4CA2BtD,CAAC;AAEF,eAAO,MAAM,oBAAoB,2BAA4B,GAAG,4CA2B/D,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,GAAG,4CAuBxC,CAAC;AAEF,eAAO,MAAM,uBAAuB,uCAKjC,GAAG,4CAiBL,CAAC;AAEF,eAAO,MAAM,QAAQ,sGAoEpB,CAAC;AAGF,eAAO,MAAM,mBAAmB,cAAe,GAAG,4CAEjD,CAAC;AAGF,eAAO,MAAM,sBAAsB,cAAe,GAAG,4CAEpD,CAAC;AAGF,eAAO,MAAM,YAAY,sGAgBxB,CAAC;AAGF,eAAO,MAAM,eAAe,sGAsB3B,CAAC;AAEF,eAAO,MAAM,WAAW,2BAA4B,GAAG,4CAUtD,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,QAAQ,EACR,KAAU,EACV,OAAO,EACP,MAAM,GACP,EAAE,GAAG,2CAiDL;AAED,eAAO,MAAM,YAAY,sGAkCxB,CAAC;AAGF,eAAO,MAAM,iBAAiB,+CAwE7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,gDAK3B,GAAG,4CA6CL,CAAC;AAGF,eAAO,MAAM,oBAAoB,kCAAmC,GAAG,4CAiDtE,CAAC;AAGF,eAAO,MAAM,uBAAuB,+CAEnC,CAAC;AAGF,eAAO,MAAM,sBAAsB,+CAMlC,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;GAG/B,CAAC;AAEF,eAAO,MAAM,SAAS,sGAIrB,CAAC;AAEF,eAAO,MAAM,WAAW,8DAMrB,GAAG,4CAwBL,CAAC;AAEF,eAAO,MAAM,kBAAkB,4FAO5B,GAAG,4CAqBL,CAAC;AAEF,eAAO,MAAM,gBAAgB,sFAO1B,GAAG,4CAqBL,CAAC;AAEF,eAAO,MAAM,UAAU,sTAuBpB,GAAG,4CAqFL,CAAC;AAEF,eAAO,MAAM,gBAAgB,oDAK1B,GAAG,4CAeL,CAAC"}

package/dist/cjs/components/ReportBuilder/ui.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AddFilterPopover = exports.TagWrapper = exports.QuillFilterPopover = exports.EditPopover = exports.QuillTabs = exports.DEFAULT_TAB_OPTIONS = exports.QuillTableLoadingState = exports.QuillButtonLoadingState = exports.QuillDraggableColumn = exports.QuillSelectColumn = exports.QuillHandleButton = exports.QuillPopover = exports.MemoizedPopover = exports.QuillSelect = exports.CustomContainer = exports.QuillSidebar = exports.QuillSidebarSubHeading = exports.QuillSidebarHeading = exports.QuillTag = exports.QuillReportBuilderTable = exports.QuillTextInput = exports.QuillSecondaryButton = exports.QuillButton = void 0;
+exports.AddFilterPopover = exports.TagWrapper = exports.QuillSortPopover = exports.QuillFilterPopover = exports.EditPopover = exports.QuillTabs = exports.DEFAULT_TAB_OPTIONS = exports.QuillTableLoadingState = exports.QuillButtonLoadingState = exports.QuillDraggableColumn = exports.QuillSelectColumn = exports.QuillHandleButton = exports.QuillPopover = exports.MemoizedPopover = exports.QuillSelect = exports.CustomContainer = exports.QuillSidebar = exports.QuillSidebarSubHeading = exports.QuillSidebarHeading = exports.QuillTag = exports.QuillReportBuilderTable = exports.QuillTextInput = exports.QuillSecondaryButton = exports.QuillButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const UiComponents_1 = require("../UiComponents");
@@ -286,8 +286,7 @@ const QuillDraggableColumn = ({ label, children, onDelete }) => {
                     textOverflow: 'ellipsis',
                     fontFamily: theme?.fontFamily,
                 }, children: label }), (0, jsx_runtime_1.jsx)("button", { onClick: onDelete, style: {
-                    paddingRight: 8,
-                    margin: -4,
+                    paddingRight: 4,
                     fontFamily: theme?.fontFamily,
                     backgroundColor: theme?.backgroundColor || 'white',
                     border: 'none',
@@ -321,7 +320,7 @@ const EditPopover = ({ onSave, onDelete, Button, renderNode, activeEditItem, })
                     justifyContent: 'end',
                     gap: 8,
                     width: '100%',
-                }, children: [(0, jsx_runtime_1.jsx)(exports.QuillSecondaryButton, { onClick: onDelete, children: "Delete" }), (0, jsx_runtime_1.jsx)(Button, { onClick: onSave, children: "Save" })] })] }));
+                }, children: [(0, jsx_runtime_1.jsx)(UiComponents_1.MemoizedSecondaryButton, { onClick: onDelete, label: "Delete" }), (0, jsx_runtime_1.jsx)(Button, { onClick: onSave, label: "Save" })] })] }));
 };
 exports.EditPopover = EditPopover;
 const QuillFilterPopover = ({ filterLabel, onClickDeleteFilter, popoverTitle, popoverChildren, isOpen, setIsOpen, }) => {
@@ -332,6 +331,14 @@ const QuillFilterPopover = ({ filterLabel, onClickDeleteFilter, popoverTitle, po
         }, children: popoverChildren }));
 };
 exports.QuillFilterPopover = QuillFilterPopover;
+const QuillSortPopover = ({ filterLabel, onClickDelete, popoverTitle, popoverChildren, isOpen, setIsOpen, }) => {
+    return ((0, jsx_runtime_1.jsx)(exports.QuillPopover, { isOpen: isOpen, title: popoverTitle, trigger: (0, jsx_runtime_1.jsx)(exports.QuillTag, { label: filterLabel, onClickDelete: onClickDelete, onClick: () => {
+                setIsOpen((isOpen) => !isOpen);
+            } }), onClose: () => {
+            setIsOpen(false);
+        }, children: popoverChildren }));
+};
+exports.QuillSortPopover = QuillSortPopover;
 const TagWrapper = ({ isCard, isRow, editPopoverKey, keyPrefix, formData, activeEditItem, setEditPopoverKey, setActiveEditItem, setActivePath, setOpenPopover, setIsPending, clearCheckboxes, fetchSqlQuery, handleDelete, setCheckboxes, handleReplaceSubtree, FilterPopover, getByKey, EditPopover, Button, renderNode, children, }) => {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
@@ -408,6 +415,6 @@ const AddFilterPopover = ({ onSave, Button, renderNode, activeEditItem, }) => {
                     display: 'flex',
                     flexDirection: 'row',
                     justifyContent: 'end',
-                }, children: (0, jsx_runtime_1.jsx)(Button, { onMouseUp: onSave, children: "Add filter" }) })] }));
+                }, children: (0, jsx_runtime_1.jsx)(Button, { onClick: onSave, label: 'Add filter' }) })] }));
 };
 exports.AddFilterPopover = AddFilterPopover;

package/dist/cjs/components/ReportBuilder/util.js

@@ -171,7 +171,7 @@ exports.getInThePreviousIntervalSentence = getInThePreviousIntervalSentence;
 // "created_at" >= CURRENT_DATE - INTERVAL '1 year'
 // in the last year aka one interval from today
 const isInTheLastInterval = (node, databaseType) => {
-    if (databaseType.toLowerCase() === 'bigquery') {
+    if (databaseType && databaseType.toLowerCase() === 'bigquery') {
         return (0, exports.isInTheLastIntervalBigQuery)(node);
     }
     const isOutsideOfDateTrunc = ['>=', '>'].includes(node.operator) &&
@@ -212,7 +212,7 @@ exports.isInTheLastIntervalBigQuery = isInTheLastIntervalBigQuery;
 // "created_at" >= date_trunc ('year', CURRENT_DATE - INTERVAL '1 year')
 // this year
 const isTheCurrentInterval = (node, databaseType) => {
-    if (databaseType.toLowerCase() === 'bigquery') {
+    if (databaseType && databaseType.toLowerCase() === 'bigquery') {
         return (0, exports.isTheCurrentIntervalBigQuery)(node);
     }
     const isInsideOfDateTrunc = ['AND'].includes(node.operator) &&

package/dist/cjs/components/UiComponents.d.ts

@@ -45,6 +45,7 @@ export interface ModalComponentProps {
     title?: string;
     setIsOpen: (isOpen: boolean) => void;
     theme?: any;
+    style?: any;
 }
 export interface HeaderProps {
     children: any;
@@ -103,6 +104,14 @@ export declare const MemoizedText: ({ children }: {
     children: any;
 }) => import("react/jsx-runtime").JSX.Element;
 export interface PopoverComponentProps {
+    isOpen: boolean;
+    setIsOpen: () => void;
+    onClose: () => void;
+    triggerLabel: string;
+    popoverTitle: string;
+    popoverChildren: any;
+}
+export interface MemoizedPopoverProps {
     children: any;
     onClose?: () => void;
     parentRef?: any;
@@ -113,14 +122,15 @@ export interface PopoverComponentProps {
     label: string;
     setIsOpen: (isOpen: boolean) => void;
 }
-export declare function MemoizedPopover({ onClose, parentRef, children, style, onClick, showTrigger, isOpen, label, setIsOpen, }: PopoverComponentProps): import("react/jsx-runtime").JSX.Element;
-export declare function MemoizedModal({ isOpen, onClose, setIsOpen, title, children, theme, }: {
+export declare function MemoizedPopover({ onClose, parentRef, children, style, onClick, showTrigger, isOpen, label, setIsOpen, }: MemoizedPopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare function MemoizedModal({ isOpen, onClose, setIsOpen, title, children, theme, style, }: {
     isOpen: any;
     onClose: any;
     setIsOpen: any;
     title: any;
     children: any;
     theme: any;
+    style?: {} | undefined;
 }): import("react/jsx-runtime").JSX.Element | null;
 export declare const MemoizedDeleteButton: ({ onClick, style }: {
     onClick: any;

package/dist/cjs/components/UiComponents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UiComponents.d.ts","sourceRoot":"","sources":["../../../src/components/UiComponents.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"UiComponents.d.ts","sourceRoot":"","sources":["../../../src/components/UiComponents.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/UiComponents.js

@@ -49,23 +49,22 @@ const MemoizedButton = ({ label, onClick, primary = true }) => {
     const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
     return ((0, jsx_runtime_1.jsxs)("button", { className: "quill-button", onClick: onClick, style: { fontFamily: theme?.fontFamily }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
     .quill-button {
-        background-color: #384151;
+        background-color: #212121;
         color: white;
         height: 40px;
        border: 1px solid transparent;
-       font-weight: 500;
+       font-weight: 600;
        border-radius: 6px;
        box-sizing: content-box;
        padding-left: 16px;
        padding-right: 16px;
-       overflow: hidden;
-       font-size: 15px;
+       font-size: 14px;
+       white-space: nowrap;
        cursor: pointer;
     }
     .quill-button:hover {
       background-color: rgba(56, 65, 81, 0.9);
       border-radius: 6px;
-      overflow: hidden;
     }` }), label] }));
 };
 exports.MemoizedButton = MemoizedButton;
@@ -84,6 +83,7 @@ const MemoizedSecondaryButton = ({ label, onClick }) => {
        box-sizing: content-box;
        font-size: 15px;
        cursor: pointer;
+       white-space: nowrap;
     }
     .quill-secondary-button:hover {
       background-color: rgba(56, 65, 81, 0.09);
@@ -250,7 +250,7 @@ function MemoizedPopover({ onClose, parentRef, children, style = {}, onClick, sh
                     }, children: children }) }))] }));
 }
 exports.MemoizedPopover = MemoizedPopover;
-function MemoizedModal({ isOpen, onClose, setIsOpen, title, children, theme, }) {
+function MemoizedModal({ isOpen, onClose, setIsOpen, title, children, theme, style = {}, }) {
     if (!isOpen) {
         return null;
     }
@@ -283,6 +283,7 @@ function MemoizedModal({ isOpen, onClose, setIsOpen, title, children, theme, })
                     borderColor: '#e7e7e7',
                     overflow: 'hidden',
                     // zIndex: 1000,
+                    ...style,
                 }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                         // width: "80%",
                         maxHeight: '90vh',

package/dist/cjs/internals/ReportBuilder/PivotModal.d.ts

@@ -8,7 +8,7 @@ export interface Pivot {
     title?: string;
     triggerButtonText?: string;
 }
-export declare 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, showPivotEditButton, showEditOnPivotClick, selectPivotOnEdit, showTrigger, rightAlign, parentRef, }: {
+export declare 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, showPivotEditButton, showEditOnPivotClick, selectPivotOnEdit, showTrigger, rightAlign, parentRef, recommendPivotCount, }: {
     pivotRowField: any;
     setPivotRowField: any;
     pivotColumnField: any;
@@ -49,6 +49,7 @@ export declare const PivotModal: ({ pivotRowField, setPivotRowField, pivotColumn
     showTrigger?: boolean | undefined;
     rightAlign?: boolean | undefined;
     parentRef: any;
+    recommendPivotCount?: number | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare function generatePivotTableYAxis(pivot: any, cols: any, format: any): any;
 export declare function isDateField(fieldType: any): boolean;

package/dist/cjs/internals/ReportBuilder/PivotModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PivotModal.d.ts","sourceRoot":"","sources":["../../../../src/internals/ReportBuilder/PivotModal.tsx"],"names":[],"mappings":"AA+BA,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAkBD,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6CA2xBtB,CAAC;AAEF,wBAAgB,uBAAuB,CAAC,KAAK,KAAA,EAAE,IAAI,KAAA,EAAE,MAAM,KAAA,OAyB1D;AAkHD,wBAAgB,WAAW,CAAC,SAAS,KAAA,WAYpC;AAgCD,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,GAAG,EACT,SAAS,EAAE,GAAG,EACd,YAAY,EAAE,OAAO,EACrB,QAAQ,SAAK,EACb,SAAS,GAAE,GAAU;;;;;;EAkYtB"}
+{"version":3,"file":"PivotModal.d.ts","sourceRoot":"","sources":["../../../../src/internals/ReportBuilder/PivotModal.tsx"],"names":[],"mappings":"AA+BA,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAkBD,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6CAwwBtB,CAAC;AAEF,wBAAgB,uBAAuB,CAAC,KAAK,KAAA,EAAE,IAAI,KAAA,EAAE,MAAM,KAAA,OAyB1D;AAkHD,wBAAgB,WAAW,CAAC,SAAS,KAAA,WAYpC;AAgCD,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,GAAG,EACT,SAAS,EAAE,GAAG,EACd,YAAY,EAAE,OAAO,EACrB,QAAQ,SAAK,EACb,SAAS,GAAE,GAAU;;;;;;EA2YtB"}