@quillsql/react 2.11.7 → 2.11.9

package/dist/esm/SQLEditor.js

@@ -7,7 +7,7 @@ import MonacoEditor from '@monaco-editor/react';
 import { ClientContext, SchemaContext, ThemeContext } from './Context';
 import QuillTable from './components/QuillTable';
 import { getData, getDataFromCloud } from './utils/dataFetcher';
-import ChartBuilder from './ChartBuilder';
+import { ChartBuilderWithModal } from './ChartBuilder';
 export function convertPostgresColumn(column) {
     let format;
     let fieldType;
@@ -122,7 +122,7 @@ const QuillButton = ({ onClick, label, theme, secondary, }) => (_jsx("button", {
         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 (_jsx("input", { style: {
             display: 'flex',
             flexDirection: 'row',
@@ -139,9 +139,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 }));
 };
-export default function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent, SecondaryButtonComponent, TextInputComponent, TableComponent = QuillTable, 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, }) {
+export default function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent, SecondaryButtonComponent, TextInputComponent, TableComponent = QuillTable, 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] = useState('');
     const [isOpen, setIsOpen] = useState(false);
     const [client] = useContext(ClientContext);
@@ -269,7 +270,8 @@ export default function QueryEditor({ containerStyle = { height: '100vh' }, Butt
         }
     }, [query]);
     /* rest of your methods */
-    return (_jsxs("div", { style: containerStyle, children: [_jsx("div", { style: {
+    return (_jsxs("div", { style: containerStyle, children: [(!chartBuilderHorizontalView ||
+                (chartBuilderHorizontalView && !isChartBuilderOpen)) && (_jsx("div", { style: {
                     height: '100%',
                     display: 'flex',
                     flexDirection: 'column',
@@ -293,8 +295,9 @@ export default function QueryEditor({ containerStyle = { height: '100vh' }, Butt
                                             display: 'flex',
                                             flexDirection: 'row',
                                             alignItems: 'center',
+                                            gap: '10px',
                                             height: 80,
-                                        }, children: [_jsx("div", { style: { minWidth: 440, marginRight: 10 }, children: (TextInputComponent && (_jsx(TextInputComponent, { id: "ai-search", value: sqlPrompt, onChange: (e) => setSqlPrompt(e.target.value), placeholder: "Ask a question..." }))) || (_jsx(QuillTextInput, { id: "ai-search", value: sqlPrompt, onChange: (e) => setSqlPrompt(e.target.value), placeholder: "Ask a question...", theme: theme })) }), (ButtonComponent && (_jsx(ButtonComponent, { onClick: handleRunSqlPrompt, label: "Ask AI" }))) || (_jsx(QuillButton, { theme: theme, onClick: handleRunSqlPrompt, label: "Ask AI" }))] }), _jsx("div", { style: { height: 'calc(50% - 40px)' }, children: _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 }) }), _jsxs("div", { style: {
+                                        }, children: [_jsx("div", { style: { minWidth: 440, flexGrow: 1 }, children: (TextInputComponent && (_jsx(TextInputComponent, { id: "ai-search", value: sqlPrompt, style: { width: '100%' }, onChange: (e) => setSqlPrompt(e.target.value), placeholder: "Ask a question..." }))) || (_jsx(QuillTextInput, { id: "ai-search", value: sqlPrompt, style: { width: '100%' }, onChange: (e) => setSqlPrompt(e.target.value), placeholder: "Ask a question...", theme: theme })) }), (ButtonComponent && (_jsx(ButtonComponent, { onClick: handleRunSqlPrompt, label: "Ask AI" }))) || (_jsx(QuillButton, { theme: theme, onClick: handleRunSqlPrompt, label: "Ask AI" }))] }), _jsx("div", { style: { height: 'calc(50% - 40px)' }, children: _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 }) }), _jsxs("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             height: 'calc(50% - 108px)',
@@ -323,7 +326,7 @@ export default function QueryEditor({ containerStyle = { height: '100vh' }, Butt
                                             justifyContent: 'flex-end',
                                             width: '100%',
                                             height: '70px',
-                                        }, children: (ButtonComponent && (_jsx(ButtonComponent, { onClick: handleRunQuery, label: "Run query" }))) || (_jsx(QuillButton, { onClick: () => setIsChartBuilderOpen(true), label: addToDashboardButtonLabel, theme: theme })) }))] })] }) }) }), _jsx(ChartBuilder, { 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 && (_jsx(ButtonComponent, { onClick: () => setIsChartBuilderOpen(true), label: addToDashboardButtonLabel }))) || (_jsx(QuillButton, { onClick: () => setIsChartBuilderOpen(true), label: addToDashboardButtonLabel, theme: theme })) }))] })] }) }) })), _jsx(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 })] }));
 }
 const SQLEditorComponent = ({ query, setQuery, handleRunQuery, handleClearQuery, defineEditorTheme, setEditorTheme, ButtonComponent, SecondaryButtonComponent, newQueryEnabled, theme, loading, LoadingComponent, }) => {
     return (_jsxs("div", { style: {

package/dist/esm/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/esm/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/esm/components/Chart/BarChart.js

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

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

@@ -4,9 +4,9 @@ import { ThemeContext } from '../../Context';
 export default function ChartError({ containerStyle }) {
     const [theme] = useContext(ThemeContext);
     return (_jsx("div", { style: {
-            ...containerStyle,
             boxSizing: 'content-box',
             height: '100%',
+            ...containerStyle,
         }, children: _jsx("div", { style: {
                 height: containerStyle?.height,
                 width: '100%',

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

@@ -4,11 +4,11 @@ import { ThemeContext } from '../../Context';
 export default function ChartSkeleton({ containerStyle }) {
     const [theme] = useContext(ThemeContext);
     return (_jsx("div", { style: {
-            ...containerStyle,
             boxSizing: 'content-box',
             height: '100%',
+            ...containerStyle,
         }, children: _jsx("div", { style: {
-                height: containerStyle?.height,
+                height: '100%',
                 width: '100%',
                 boxSizing: 'content-box',
                 borderRadius: 8,

package/dist/esm/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/esm/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/esm/components/Chart/LineChart.js

@@ -7,7 +7,7 @@ import { selectColor } from '../../utils/color';
 import ChartTooltip from '../../components/Chart/ChartTooltip';
 import getDomain from '../../utils/getDomain';
 import { useEffect, useState } from 'react';
-export default 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', }) {
+export default 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] = useState([]);
     if (!yAxisFields || !yAxisFields.length) {
         return null;
@@ -43,16 +43,21 @@ export default function LineChart({ colors, yAxisFields, data, containerStyle, x
                 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 (_jsx("div", { style: { ...containerStyle }, children: _jsx(ResponsiveContainer, { width: "100%", height: '100%', children: _jsxs(ReChartsAreaChart, { data: formattedData, children: [!hideCartesianGrid && (_jsx(CartesianGrid, { horizontal: true, vertical: false, stroke: "#e5e7eb" })), _jsx(XAxis, { dataKey: xAxisField, hide: hideXAxis, tick: { transform: 'translate(0, 6)' }, style: {
@@ -99,5 +104,7 @@ export default function LineChart({ colors, yAxisFields, data, containerStyle, x
                                         { field: xAxisField, format: xAxisFormat },
                                     ],
                                 }), xAxisFormat: xAxisFormat, xAxisField: xAxisField, colors: colors, theme: theme }));
-                        }, position: { y: 0 } }), yAxisFields.map((elem, index) => (_jsx("defs", { children: _jsxs("linearGradient", { id: `gradient${index}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "5%", stopColor: getCustomColor(index) ?? selectColor(elem, colors, index), stopOpacity: 0.4 }), _jsx("stop", { offset: "95%", stopColor: 'rgba(0,0,0,0)', stopOpacity: 0 })] }) }, `defs${elem.field + index}`))), yAxisFields.map((elem, index) => (_jsx(Area, { name: elem.label, type: "linear", dataKey: elem.field, stroke: getCustomColor(index) ?? 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) => (_jsx("defs", { children: _jsxs("linearGradient", { id: `gradient${elem.field}${index}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "5%", stopColor: getCustomColor(index, elem.field) ??
+                                        selectColor(elem, colors, index), stopOpacity: 0.4 }), _jsx("stop", { offset: "95%", stopColor: 'rgba(0,0,0,0)', stopOpacity: 0 })] }) }, `defs${elem.field + index}`))), yAxisFields.map((elem, index) => (_jsx(Area, { name: elem.label, type: "linear", dataKey: elem.field, stroke: getCustomColor(index, elem.field) ??
+                            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)))] }) }) }));
 }

package/dist/esm/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/esm/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/esm/components/Dashboard/TableComponent.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function DashboardItem({ dashboardItem, onClickDashboardItem, theme, style, children, }) {
+export default function DashboardItem({ dashboardItem, onClickDashboardItem, isLoading, theme, style, children, }) {
     return (_jsxs("div", { style: {
             cursor: 'pointer',
             ...style,

package/dist/esm/components/QuillTable.js

@@ -60,7 +60,7 @@ export default function QuillTable({ rows, columns, loading, showDownloadCSVButt
     return (_jsx("div", { style: {
             width: '100%',
             height: '100%',
-            overflow: 'visible',
+            overflow: 'auto',
             display: 'flex',
             flexDirection: 'column',
             ...containerStyle,

package/dist/esm/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/esm/components/ReportBuilder/AddColumnPopover.js

@@ -63,7 +63,7 @@ export default function AddColumnPopover({ onSave, orderedColumnNames, setOrdere
                 }, children: [selectedColumns.length > 0 && !isSelectedAllColumns() && (_jsx(SecondaryButton, { onClick: () => setSelectedColumns(orderedColumnNames.filter((row) => {
                             const [table, _column] = row.split('.');
                             return selectedColumns[0].startsWith(table);
-                        })), children: "Select all" })), selectedColumns.length > 0 && isSelectedAllColumns() && (_jsx(SecondaryButton, { onClick: () => setSelectedColumns([]), children: "Clear" })), _jsx(Button, { onMouseUp: () => {
+                        })), label: "Select all" })), selectedColumns.length > 0 && isSelectedAllColumns() && (_jsx(SecondaryButton, { onClick: () => setSelectedColumns([]), label: "Clear" })), _jsx(Button, { onClick: () => {
                             // follow the ordering of the ordered column names
                             let tableName = initialTableName;
                             const orderedSelectedColumns = [];
@@ -103,7 +103,7 @@ export default function AddColumnPopover({ onSave, orderedColumnNames, setOrdere
                                 setPivot(null);
                             }
                             onSave();
-                        }, children: "Save" })] })] }));
+                        }, label: "Save" })] })] }));
 }
 const SortableItem = ({ id, label, setSelectedColumns, theme, selectedColumns, SelectColumn, HandleButton, }) => {
     const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: id });

package/dist/esm/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/esm/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/esm/components/ReportBuilder/AddSortPopover.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { QuillSelect } from './ui';
+import { MemoizedButton, MemoizedSecondaryButton } from '../UiComponents';
+const SORT_VALUE_TO_LABEL = {
+    ASC: 'ascending',
+    DESC: 'descending',
+};
+export const SortSentence = ({ sortData, keyPrefix, columns, handleDelete, setEditPopoverKey, setOpenPopover, setActiveEditItem, setIsPending, setActivePath, onSave, popoverTitle = 'Edit Sort', SortPopover, EditPopover, children, }) => {
+    const [isOpen, setIsOpen] = 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 (_jsx("div", { style: { width: '100%' }, children: _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: _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);
+            } }) }));
+};
+export const AddSortPopover = ({ onSave, columns, isEdit, onDelete, column, }) => {
+    const [sortColumn, setSortColumn] = useState(column || '');
+    const [sortDirection, setSortDirection] = useState('ASC');
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 12 }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, children: [_jsx(QuillSelect, { value: sortColumn, onChange: (value) => {
+                            setSortColumn(value);
+                        }, options: [
+                            { label: 'Select', value: '' },
+                            ...columns.map((column) => ({
+                                label: column.split('.')[1],
+                                value: column.split('.')[1],
+                            })),
+                        ] }), _jsx(QuillSelect, { value: sortDirection, onChange: (value) => {
+                            setSortDirection(value);
+                        }, options: [
+                            { label: 'Ascending', value: 'ASC' },
+                            { label: 'Descending', value: 'DESC' },
+                        ] })] }), _jsx("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    justifyContent: 'end',
+                    gap: 12,
+                }, children: isEdit ? (_jsxs(_Fragment, { children: [_jsx(MemoizedSecondaryButton, { onClick: onDelete, label: "Delete" }), _jsx(MemoizedButton, { onClick: () => onSave(sortColumn, sortDirection), label: "Add sort" })] })) : (_jsx(MemoizedButton, { onClick: () => onSave(sortColumn, sortDirection), label: "Add sort" })) })] }));
+};

package/dist/esm/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/esm/components/ReportBuilder/convert.js

@@ -211,7 +211,8 @@ export 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' &&
@@ -527,7 +528,7 @@ export 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/esm/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/esm/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,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,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/esm/components/ReportBuilder/ui.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useContext, useEffect, useRef, useState } from 'react';
-import { MemoizedSelect, MemoizedCheckbox, MemoizedHeader, MemoizedLabel, MemoizedTabs, LoadingSpinner, } from '../UiComponents';
+import { MemoizedSelect, MemoizedCheckbox, MemoizedHeader, MemoizedLabel, MemoizedTabs, LoadingSpinner, MemoizedSecondaryButton, } from '../UiComponents';
 import MemoizedQuillTable from '../QuillTable';
 import { ThemeContext } from '../../Context';
 import { isNodeEmptyCollection } from './util';
@@ -301,7 +301,7 @@ export const EditPopover = ({ onSave, onDelete, Button, renderNode, activeEditIt
                     justifyContent: 'end',
                     gap: 8,
                     width: '100%',
-                }, children: [_jsx(QuillSecondaryButton, { onClick: onDelete, children: "Delete" }), _jsx(Button, { onClick: onSave, children: "Save" })] })] }));
+                }, children: [_jsx(MemoizedSecondaryButton, { onClick: onDelete, label: "Delete" }), _jsx(Button, { onClick: onSave, label: "Save" })] })] }));
 };
 export const QuillFilterPopover = ({ filterLabel, onClickDeleteFilter, popoverTitle, popoverChildren, isOpen, setIsOpen, }) => {
     return (_jsx(QuillPopover, { isOpen: isOpen, title: popoverTitle, trigger: _jsx(QuillTag, { label: filterLabel, onClickDelete: onClickDeleteFilter, onClick: () => {
@@ -310,6 +310,13 @@ export const QuillFilterPopover = ({ filterLabel, onClickDeleteFilter, popoverTi
             setIsOpen(false);
         }, children: popoverChildren }));
 };
+export const QuillSortPopover = ({ filterLabel, onClickDelete, popoverTitle, popoverChildren, isOpen, setIsOpen, }) => {
+    return (_jsx(QuillPopover, { isOpen: isOpen, title: popoverTitle, trigger: _jsx(QuillTag, { label: filterLabel, onClickDelete: onClickDelete, onClick: () => {
+                setIsOpen((isOpen) => !isOpen);
+            } }), onClose: () => {
+            setIsOpen(false);
+        }, children: popoverChildren }));
+};
 export 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] = useState(false);
     useEffect(() => {
@@ -385,5 +392,5 @@ export const AddFilterPopover = ({ onSave, Button, renderNode, activeEditItem, }
                     display: 'flex',
                     flexDirection: 'row',
                     justifyContent: 'end',
-                }, children: _jsx(Button, { onMouseUp: onSave, children: "Add filter" }) })] }));
+                }, children: _jsx(Button, { onClick: onSave, label: 'Add filter' }) })] }));
 };

package/dist/esm/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/esm/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":"AACA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAK7D,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,0BAA0B,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC1E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,GAAG,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,GAAG,CAAC;CACf;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,GAAG,CAAC;CACf;AAED,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,GAAG,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,eAAO,MAAM,cAAc,iDAMxB,uBAAuB,4CA0BzB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;6CAgC7B,CAAC;AAEF,eAAO,MAAM,cAAc;;;;6CA+B1B,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;6CA8BnC,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;6CAqE1B,CAAC;AAEF,eAAO,MAAM,cAAc;;6CAkB1B,CAAC;AAEF,eAAO,MAAM,aAAa;;6CAiBzB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;6CAa5B,CAAC;AAEF,eAAO,MAAM,YAAY;;;;6CAgDxB,CAAC;AAEF,eAAO,MAAM,YAAY;;6CAYxB,CAAC;AAsBF,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,GAAG,CAAC;CACtB;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,GAAG,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC;AAED,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,SAAS,EACT,QAAQ,EACR,KAAU,EACV,OAAO,EACP,WAAkB,EAClB,MAAM,EACN,KAAK,EACL,SAAS,GACV,EAAE,oBAAoB,2CA2DtB;AAED,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,OAAO,EACP,SAAS,EACT,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAU,GACX;;;;;;;;CAAA,kDA4FA;AAED,eAAO,MAAM,oBAAoB;;;6CA0BhC,CAAC;AAEF,eAAO,MAAM,cAAc,+CAwD1B,CAAC"}

package/dist/esm/components/UiComponents.js

@@ -44,23 +44,22 @@ export const MemoizedButton = ({ label, onClick, primary = true }) => {
     const [theme] = useContext(ThemeContext);
     return (_jsxs("button", { className: "quill-button", onClick: onClick, style: { fontFamily: theme?.fontFamily }, children: [_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] }));
 };
 export const MemoizedSecondaryButton = ({ label, onClick }) => {
@@ -78,6 +77,7 @@ export 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);
@@ -236,7 +236,7 @@ export function MemoizedPopover({ onClose, parentRef, children, style = {}, onCl
                         ...style,
                     }, children: children }) }))] }));
 }
-export function MemoizedModal({ isOpen, onClose, setIsOpen, title, children, theme, }) {
+export function MemoizedModal({ isOpen, onClose, setIsOpen, title, children, theme, style = {}, }) {
     if (!isOpen) {
         return null;
     }
@@ -269,6 +269,7 @@ export function MemoizedModal({ isOpen, onClose, setIsOpen, title, children, the
                     borderColor: '#e7e7e7',
                     overflow: 'hidden',
                     // zIndex: 1000,
+                    ...style,
                 }, children: _jsxs("div", { style: {
                         // width: "80%",
                         maxHeight: '90vh',

package/dist/esm/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/esm/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"}