@quillsql/react 2.10.23 → 2.10.24

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

@@ -1 +1 @@
-{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart.tsx"],"names":[],"mappings":";AA2BA,UAAU,cAAc;IACtB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,UAAU,WAAY,SAAQ,cAAc;IAC1C,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,WAAW,GACnB,cAAc,GACd,mBAAmB,GACnB,oBAAoB,GACpB,eAAe,GACf,cAAc,GACd,UAAU,GACV,aAAa,GACb,eAAe,GACf,oBAAoB,GACpB,UAAU,GACV,SAAS,GACT,QAAQ,CAAC;AAEb,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,UAAU,UAAW,SAAQ,cAAc;IACzC,MAAM,EAAE,aAAa,GAAG,GAAG,CAAC;CAC7B;AAED,KAAK,UAAU,GAAG,WAAW,GAAG,UAAU,CAAC;AA4D3C,wBAAgB,gBAAgB,CAAC,aAAa,KAAA,EAAE,OAAO,KAAA,WAQtD;AAKD,QAAA,MAAM,KAAK,8JAYR,UAAU,4CAkCZ,CAAC;AAkeF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart.tsx"],"names":[],"mappings":";AA4BA,UAAU,cAAc;IACtB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,UAAU,WAAY,SAAQ,cAAc;IAC1C,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,WAAW,GACnB,cAAc,GACd,mBAAmB,GACnB,oBAAoB,GACpB,eAAe,GACf,cAAc,GACd,UAAU,GACV,aAAa,GACb,eAAe,GACf,oBAAoB,GACpB,UAAU,GACV,SAAS,GACT,QAAQ,CAAC;AAEb,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,UAAU,UAAW,SAAQ,cAAc;IACzC,MAAM,EAAE,aAAa,GAAG,GAAG,CAAC;CAC7B;AAED,KAAK,UAAU,GAAG,WAAW,GAAG,UAAU,CAAC;AA4D3C,wBAAgB,gBAAgB,CAAC,aAAa,KAAA,EAAE,OAAO,KAAA,WAQtD;AAKD,QAAA,MAAM,KAAK,8JAYR,UAAU,4CAkCZ,CAAC;AAicF,eAAe,KAAK,CAAC"}

package/dist/cjs/Chart.js

@@ -7,8 +7,6 @@ exports.didFiltersChange = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 // @ts-nocheck
 const react_1 = require("react");
-const aggregate_1 = require("./utils/aggregate");
-const ReportBuilder_1 = require("./ReportBuilder");
 const date_fns_1 = require("date-fns");
 const BarList_1 = __importDefault(require("./BarList"));
 const PieChart_1 = __importDefault(require("./PieChart"));
@@ -22,6 +20,7 @@ const BarChart_1 = __importDefault(require("./components/Chart/BarChart"));
 const merge_1 = require("./utils/merge");
 const ChartSkeleton_1 = __importDefault(require("./components/Chart/ChartSkeleton"));
 const ChartError_1 = __importDefault(require("./components/Chart/ChartError"));
+const dateRangePickerUtils_1 = require("./DateRangePicker/dateRangePickerUtils");
 // @ts-ignore
 function sumByKey(arr, key) {
     // @ts-ignore
@@ -95,7 +94,6 @@ const ChartUpdater = ({ colors, chartId, config, containerStyle, dashboard, disp
     const [initialLoad, setInitialLoad] = (0, react_1.useState)(true);
     const [loading, setLoading] = (0, react_1.useState)(false);
     const [isComparison, setIsComparison] = (0, react_1.useState)(false);
-    const [bucketData, setBucketData] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
         async function getChartOptions() {
             if (!didFiltersChange(dashboard[chartId], dashboardFilters)) {
@@ -162,42 +160,6 @@ const ChartUpdater = ({ colors, chartId, config, containerStyle, dashboard, disp
         setInitialLoad(false);
         getChartOptions();
     }, [dashboardFilters, client, chartId]);
-    (0, react_1.useEffect)(() => {
-        if (!dashboardFilters ||
-            !chartId ||
-            !dashboard[chartId] ||
-            !dashboard[chartId].buckets ||
-            !dashboard[chartId].buckets.length) {
-            return;
-        }
-        const dateFilter = Object.values(dashboardFilters).find((filter) => filter.filterType == 'date_range');
-        if (dateFilter && dashboard[chartId].rows.length) {
-            const aggregatedObj = (0, aggregate_1.aggregate)(dashboard[chartId], dashboard[chartId].buckets, dateFilter);
-            setBucketData({
-                name: dashboard[chartId].name,
-                xAxisFormat: aggregatedObj.xAxisFormat,
-                xAxisField: aggregatedObj.xAxisField,
-                xAxisLabel: aggregatedObj.xAxisLabel,
-                rows: aggregatedObj.bucketedRows,
-            });
-        }
-        const stringFilters = dashboard[chartId].buckets.filter((bucket) => {
-            return ((0, ReportBuilder_1.getPostgresBasicType)(dashboard[chartId].fields.find((field) => field.name === bucket.field)) === 'string');
-        });
-        if (stringFilters.length && dashboard[chartId].rows.length) {
-            const aggregatedObj = (0, aggregate_1.aggregate)(dashboard[chartId], dashboard[chartId].buckets, null);
-            setBucketData({
-                name: dashboard[chartId].name,
-                xAxisFormat: aggregatedObj.xAxisFormat,
-                xAxisField: aggregatedObj.xAxisField,
-                xAxisLabel: aggregatedObj.xAxisLabel,
-                rows: aggregatedObj.bucketedRows,
-            });
-        }
-        if (!dashboard[chartId].rows.length && bucketData !== null) {
-            setBucketData(null);
-        }
-    }, [dashboard[chartId]]);
     const dateFilter = Object.values(dashboardFilters ?? {}).find((filter) => filter.filterType == 'date_range');
     const isPivot = dashboard[chartId]?.pivot || config?.pivot;
     const pivotTable = (0, react_1.useMemo)(() => {
@@ -281,25 +243,12 @@ const ChartUpdater = ({ colors, chartId, config, containerStyle, dashboard, disp
         return ((0, jsx_runtime_1.jsx)(BarList_1.default, { data: pivotTable
                 ? pivotTable.rows
                 : config
-                    ? (config.bucketedRows &&
-                        config.bucketedRows.length > 0 &&
-                        config.bucketedRows) ||
-                        config.rows
-                    : bucketData && bucketData.rows
-                        ? bucketData.rows
-                        : dashboard[chartId].rows, theme: theme, yAxisFields: pivotTableYAxis
+                    ? config.rows
+                    : dashboard[chartId].rows, theme: theme, yAxisFields: pivotTableYAxis
                 ? pivotTableYAxis
                 : config
                     ? config.yAxisFields
-                    : dashboard[chartId].yAxisFields, colors: colors, xAxisField: config
-                ? config.xAxisField
-                : bucketData
-                    ? bucketData.xAxisField
-                    : dashboard[chartId].xAxisField, xAxisFormat: config
-                ? config.xAxisFormat
-                : bucketData
-                    ? bucketData.xAxisFormat
-                    : dashboard[chartId].xAxisFormat, containerStyle: containerStyle }));
+                    : dashboard[chartId].yAxisFields, colors: colors, xAxisField: config ? config.xAxisField : dashboard[chartId].xAxisField, xAxisFormat: config ? config.xAxisFormat : dashboard[chartId].xAxisFormat, containerStyle: containerStyle }));
     }
     const yAxisFields = pivotTableYAxis
         ? pivotTableYAxis
@@ -317,13 +266,8 @@ const ChartUpdater = ({ colors, chartId, config, containerStyle, dashboard, disp
     const data = (pivotTable
         ? pivotTable.rows
         : config
-            ? (config.bucketedRows &&
-                config.bucketedRows.length > 0 &&
-                config.bucketedRows) ||
-                config.rows
-            : bucketData && bucketData.rows && bucketData.rows.length > 0
-                ? bucketData.rows
-                : dashboard[chartId].rows)
+            ? config.rows
+            : dashboard[chartId].rows)
         // filter out any rows with a comparison key but no corresponding primary
         ?.filter((row) => Object.keys(row).every((key) => !key.startsWith('comparison_') ||
         (key.startsWith('comparison_') &&
@@ -331,23 +275,16 @@ const ChartUpdater = ({ colors, chartId, config, containerStyle, dashboard, disp
     if (chartTypes.includes('column')) {
         return ((0, jsx_runtime_1.jsx)(BarChart_1.default, { colors: colors, theme: theme, isStacked: isPivot && yAxisFields.length > (dateFilter?.comparison ? 2 : 1), yAxisFields: yAxisFields, 
             // @ts-ignore
-            data: data, xAxisField: config
-                ? config.xAxisField
-                : bucketData
-                    ? bucketData.xAxisField
-                    : dashboard[chartId].xAxisField, xAxisLabel: config
-                ? config.xAxisLabel
-                : bucketData
-                    ? bucketData.xAxisLabel
-                    : dashboard[chartId].xAxisLabel, xAxisFormat: config
-                ? config.xAxisFormat
-                : bucketData
-                    ? bucketData.xAxisFormat
-                    : dashboard[chartId].xAxisFormat, containerStyle: containerStyle, comparison: dateFilter?.comparison, isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid }));
+            data: data, xAxisField: config ? config.xAxisField : dashboard[chartId].xAxisField, xAxisLabel: config ? config.xAxisLabel : dashboard[chartId].xAxisLabel, xAxisFormat: config ? config.xAxisFormat : dashboard[chartId].xAxisFormat, containerStyle: containerStyle, comparison: dateFilter?.comparison, isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid }));
     }
     if (chartTypes.includes('metric')) {
         const data = dashboard[chartId] ? dashboard[chartId] : config;
-        return ((0, jsx_runtime_1.jsx)("div", { style: {
+        const isComparison = data.rows.length > 0 &&
+            Object.keys(data.rows[0]).includes(`comparison_${data.xAxisField}`);
+        const primaryMetricLabel = data?.filtersApplied?.date_range?.preset?.label;
+        const comparisonKey = data?.filtersApplied?.date_range?.comparisonRange?.value;
+        const comparisonLabel = dateRangePickerUtils_1.COMPARISON_OPTIONS.find((opt) => opt.value === comparisonKey)?.text;
+        return ((0, jsx_runtime_1.jsxs)("div", { style: {
                 fontFamily: theme?.fontFamily,
                 fontSize: 32,
                 color: theme?.primaryTextColor,
@@ -361,31 +298,62 @@ const ChartUpdater = ({ colors, chartId, config, containerStyle, dashboard, disp
                 overflow: 'hidden',
                 height: containerStyle?.height || '100%',
                 display: 'flex',
-                flexDirection: 'column',
-            }, children: data.rows.length > 0 &&
-                (0, valueFormatter_1.valueFormatter)({
-                    value: data.rows[0][data.xAxisField],
-                    field: data.xAxisField,
-                    fields: [
-                        {
-                            field: data.xAxisField,
-                            format: data.xAxisFormat,
-                        },
-                    ],
-                }) }));
+                width: '100%',
+                flexDirection: 'row',
+            }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        gap: 4,
+                        alignItems: 'baseline',
+                        marginRight: 'auto',
+                    }, children: [(0, jsx_runtime_1.jsx)("span", { children: data.rows.length > 0 &&
+                                (0, valueFormatter_1.valueFormatter)({
+                                    value: data.rows[0][data.xAxisField],
+                                    field: data.xAxisField,
+                                    fields: [
+                                        {
+                                            field: data.xAxisField,
+                                            format: data.xAxisFormat,
+                                        },
+                                    ],
+                                }) }), isComparison && ((0, jsx_runtime_1.jsx)("span", { style: {
+                                fontSize: 13,
+                                fontWeight: '500',
+                                fontFamily: theme?.fontFamily,
+                                color: theme?.primaryTextColor,
+                                marginLeft: 2,
+                            }, children: primaryMetricLabel
+                                ? `in ${primaryMetricLabel.toLowerCase()}`
+                                : 'this period' }))] }), isComparison && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        gap: 4,
+                        alignItems: 'baseline',
+                        paddingTop: 4,
+                        color: theme?.secondaryTextColor,
+                    }, children: [(0, jsx_runtime_1.jsx)("span", { style: {
+                                fontSize: 28,
+                                fontWeight: '500',
+                                fontFamily: theme?.fontFamily,
+                                color: theme?.secondaryTextColor,
+                            }, children: data.rows.length > 0 &&
+                                (0, valueFormatter_1.valueFormatter)({
+                                    value: data.rows[0][`comparison_${data.xAxisField}`],
+                                    field: data.xAxisField,
+                                    fields: [
+                                        {
+                                            field: data.xAxisField,
+                                            format: data.xAxisFormat,
+                                        },
+                                    ],
+                                }) }), (0, jsx_runtime_1.jsx)("span", { style: {
+                                fontSize: 13,
+                                fontWeight: '500',
+                                fontFamily: theme?.fontFamily,
+                                color: theme?.secondaryTextColor,
+                                marginLeft: 2,
+                            }, children: comparisonLabel
+                                ? 'in ' + comparisonLabel.toLowerCase()
+                                : 'previous period' })] }))] }));
     }
-    return ((0, jsx_runtime_1.jsx)(LineChart_1.default, { colors: colors, yAxisFields: yAxisFields, data: data, xAxisField: config
-            ? config.xAxisField
-            : bucketData
-                ? bucketData.xAxisField
-                : dashboard[chartId].xAxisField, xAxisLabel: config
-            ? config.xAxisLabel
-            : bucketData
-                ? bucketData.xAxisLabel
-                : dashboard[chartId].xAxisLabel, xAxisFormat: config
-            ? config.xAxisFormat
-            : bucketData
-                ? bucketData.xAxisFormat
-                : dashboard[chartId].xAxisFormat, containerStyle: containerStyle, theme: theme, comparison: dateFilter?.comparison, isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid }));
+    return ((0, jsx_runtime_1.jsx)(LineChart_1.default, { colors: colors, yAxisFields: yAxisFields, data: data, xAxisField: config ? config.xAxisField : dashboard[chartId].xAxisField, xAxisLabel: config ? config.xAxisLabel : dashboard[chartId].xAxisLabel, xAxisFormat: config ? config.xAxisFormat : dashboard[chartId].xAxisFormat, containerStyle: containerStyle, theme: theme, comparison: dateFilter?.comparison, isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid }));
 };
 exports.default = Chart;

package/dist/cjs/SQLEditor.d.ts

@@ -34,7 +34,6 @@ interface SQLEditorProps {
     addToDashboardButtonLabel?: string;
     onAddToDashboardComplete?: () => void;
     organizationName?: string;
-    onlyQueryQuillViews?: boolean;
 }
 interface TableComponentProps {
     rows: any[];
@@ -47,7 +46,7 @@ interface TextInputComponentProps {
     id: string;
     placeholder?: string;
 }
-export default function QueryEditor({ containerStyle, ButtonComponent, SecondaryButtonComponent, TextInputComponent, TableComponent, newQueryEnabled, LoadingComponent, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isEditMode, chartBuilderEnabled, showTableFormatOptions, showDateFieldOptions, showAccessControlOptions, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel, dashboardItem, organizationName, onlyQueryQuillViews, }: SQLEditorProps): import("react/jsx-runtime").JSX.Element;
+export default function QueryEditor({ containerStyle, ButtonComponent, SecondaryButtonComponent, TextInputComponent, TableComponent, newQueryEnabled, LoadingComponent, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isEditMode, chartBuilderEnabled, showTableFormatOptions, showDateFieldOptions, showAccessControlOptions, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel, dashboardItem, organizationName, }: SQLEditorProps): import("react/jsx-runtime").JSX.Element;
 export declare const SchemaListComponent: ({ schema, theme, loading, LoadingComponent, width, }: {
     schema: any;
     theme: any;

package/dist/cjs/SQLEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SQLEditor.d.ts","sourceRoot":"","sources":["../../src/SQLEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAUxE,wBAAgB,qBAAqB,CAAC,MAAM,KAAA;;;;;EAwE3C;AA2BD,UAAU,oBAAoB;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,cAAc;IACtB,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;IAEpC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC/D,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAExE,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC;IACrE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC7D,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;IACtC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAQD,UAAU,mBAAmB;IAC3B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AA+ED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,cAAoC,EACpC,eAAe,EACf,wBAAwB,EACxB,kBAAkB,EAClB,cAAc,EACd,eAAuB,EACvB,gBAAgB,EAChB,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,eAAe,EACf,cAAc,EACd,UAAkB,EAClB,mBAA2B,EAC3B,sBAA8B,EAC9B,oBAA4B,EAC5B,wBAAgC,EAChC,oBAAoB,EACpB,iBAAiB,EACjB,uBAAuB,EACvB,wBAAwB,EACxB,yBAA8C,EAC9C,aAAyB,EACzB,gBAA4B,EAC5B,mBAA2B,GAC5B,EAAE,cAAc,2CAwWhB;AA8LD,eAAO,MAAM,mBAAmB;;;;;;6CAqG/B,CAAC"}
+{"version":3,"file":"SQLEditor.d.ts","sourceRoot":"","sources":["../../src/SQLEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAUxE,wBAAgB,qBAAqB,CAAC,MAAM,KAAA;;;;;EAwE3C;AA2BD,UAAU,oBAAoB;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,cAAc;IACtB,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;IAEpC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC/D,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAExE,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC;IACrE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC7D,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;IACtC,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAQD,UAAU,mBAAmB;IAC3B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AA+ED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,cAAoC,EACpC,eAAe,EACf,wBAAwB,EACxB,kBAAkB,EAClB,cAAc,EACd,eAAuB,EACvB,gBAAgB,EAChB,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,eAAe,EACf,cAAc,EACd,UAAkB,EAClB,mBAA2B,EAC3B,sBAA8B,EAC9B,oBAA4B,EAC5B,wBAAgC,EAChC,oBAAoB,EACpB,iBAAiB,EACjB,uBAAuB,EACvB,wBAAwB,EACxB,yBAA8C,EAC9C,aAAyB,EACzB,gBAA4B,GAC7B,EAAE,cAAc,2CAgVhB;AA8LD,eAAO,MAAM,mBAAmB;;;;;;6CAqG/B,CAAC"}

package/dist/cjs/SQLEditor.js

@@ -148,7 +148,7 @@ const QuillTextInput = ({ onChange, value, id, placeholder, theme, }) => {
             borderRadius: '6px',
         }, id: id, onChange: onChange, value: value, placeholder: placeholder }));
 };
-function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent, SecondaryButtonComponent, TextInputComponent, TableComponent, 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, onlyQueryQuillViews = false, }) {
+function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent, SecondaryButtonComponent, TextInputComponent, TableComponent, 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, }) {
     const [sqlPrompt, setSqlPrompt] = (0, react_1.useState)('');
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const [client] = (0, react_1.useContext)(Context_1.ClientContext);
@@ -210,21 +210,6 @@ function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent, Se
         try {
             setSqlQueryLoading(true);
             setErrorMessage('');
-            if (onlyQueryQuillViews) {
-                const tableAlias = query.match(/(\w+) AS \(/gi)?.map((match) => match.split(' ')[0]) ||
-                    [];
-                const tableNames = query
-                    .match(/FROM\s+(\w+)/gi)
-                    .map((match) => match.split(' ')[1])
-                    .filter((tableName) => !tableAlias.includes(tableName) &&
-                    tableName?.toLocaleLowerCase() !== '(select');
-                const unselectableTables = tableNames.filter((tableName) => !schema.some((table) => table.displayName === tableName));
-                if (unselectableTables.length !== 0) {
-                    setSqlQueryLoading(false);
-                    setErrorMessage('No Quill SQL views with the name ' + unselectableTables[0]);
-                    return;
-                }
-            }
             const hostedBody = {
                 metadata: {
                     query,

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

@@ -1 +1 @@
-{"version":3,"file":"MetricComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/MetricComponent.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,CAqGnB"}
+{"version":3,"file":"MetricComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/MetricComponent.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,CAsGnB"}

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

@@ -58,6 +58,7 @@ function DashboardItem({ dashboardItem, onClickDashboardItem, theme, style, chil
                                     }, children: 'view report →' })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: {
                                 padding: 0,
                                 height: '100%',
+                                width: '100%',
                                 boxSizing: 'content-box',
                             }, children: children })] }) }) }) }, dashboardItem?.name));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart.tsx"],"names":[],"mappings":";AA2BA,UAAU,cAAc;IACtB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,UAAU,WAAY,SAAQ,cAAc;IAC1C,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,WAAW,GACnB,cAAc,GACd,mBAAmB,GACnB,oBAAoB,GACpB,eAAe,GACf,cAAc,GACd,UAAU,GACV,aAAa,GACb,eAAe,GACf,oBAAoB,GACpB,UAAU,GACV,SAAS,GACT,QAAQ,CAAC;AAEb,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,UAAU,UAAW,SAAQ,cAAc;IACzC,MAAM,EAAE,aAAa,GAAG,GAAG,CAAC;CAC7B;AAED,KAAK,UAAU,GAAG,WAAW,GAAG,UAAU,CAAC;AA4D3C,wBAAgB,gBAAgB,CAAC,aAAa,KAAA,EAAE,OAAO,KAAA,WAQtD;AAKD,QAAA,MAAM,KAAK,8JAYR,UAAU,4CAkCZ,CAAC;AAkeF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart.tsx"],"names":[],"mappings":";AA4BA,UAAU,cAAc;IACtB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,UAAU,WAAY,SAAQ,cAAc;IAC1C,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,WAAW,GACnB,cAAc,GACd,mBAAmB,GACnB,oBAAoB,GACpB,eAAe,GACf,cAAc,GACd,UAAU,GACV,aAAa,GACb,eAAe,GACf,oBAAoB,GACpB,UAAU,GACV,SAAS,GACT,QAAQ,CAAC;AAEb,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,UAAU,UAAW,SAAQ,cAAc;IACzC,MAAM,EAAE,aAAa,GAAG,GAAG,CAAC;CAC7B;AAED,KAAK,UAAU,GAAG,WAAW,GAAG,UAAU,CAAC;AA4D3C,wBAAgB,gBAAgB,CAAC,aAAa,KAAA,EAAE,OAAO,KAAA,WAQtD;AAKD,QAAA,MAAM,KAAK,8JAYR,UAAU,4CAkCZ,CAAC;AAicF,eAAe,KAAK,CAAC"}

package/dist/esm/Chart.js

@@ -1,8 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-nocheck
 import { useState, useEffect, useContext, useMemo } from 'react';
-import { aggregate } from './utils/aggregate';
-import { getPostgresBasicType } from './ReportBuilder';
 import { differenceInHours } from 'date-fns';
 import BarList from './BarList';
 import PieChart from './PieChart';
@@ -16,6 +14,7 @@ import BarChart from './components/Chart/BarChart';
 import { mergeComparisonRange } from './utils/merge';
 import ChartSkeleton from './components/Chart/ChartSkeleton';
 import ChartError from './components/Chart/ChartError';
+import { COMPARISON_OPTIONS } from './DateRangePicker/dateRangePickerUtils';
 // @ts-ignore
 function sumByKey(arr, key) {
     // @ts-ignore
@@ -88,7 +87,6 @@ const ChartUpdater = ({ colors, chartId, config, containerStyle, dashboard, disp
     const [initialLoad, setInitialLoad] = useState(true);
     const [loading, setLoading] = useState(false);
     const [isComparison, setIsComparison] = useState(false);
-    const [bucketData, setBucketData] = useState(null);
     useEffect(() => {
         async function getChartOptions() {
             if (!didFiltersChange(dashboard[chartId], dashboardFilters)) {
@@ -155,42 +153,6 @@ const ChartUpdater = ({ colors, chartId, config, containerStyle, dashboard, disp
         setInitialLoad(false);
         getChartOptions();
     }, [dashboardFilters, client, chartId]);
-    useEffect(() => {
-        if (!dashboardFilters ||
-            !chartId ||
-            !dashboard[chartId] ||
-            !dashboard[chartId].buckets ||
-            !dashboard[chartId].buckets.length) {
-            return;
-        }
-        const dateFilter = Object.values(dashboardFilters).find((filter) => filter.filterType == 'date_range');
-        if (dateFilter && dashboard[chartId].rows.length) {
-            const aggregatedObj = aggregate(dashboard[chartId], dashboard[chartId].buckets, dateFilter);
-            setBucketData({
-                name: dashboard[chartId].name,
-                xAxisFormat: aggregatedObj.xAxisFormat,
-                xAxisField: aggregatedObj.xAxisField,
-                xAxisLabel: aggregatedObj.xAxisLabel,
-                rows: aggregatedObj.bucketedRows,
-            });
-        }
-        const stringFilters = dashboard[chartId].buckets.filter((bucket) => {
-            return (getPostgresBasicType(dashboard[chartId].fields.find((field) => field.name === bucket.field)) === 'string');
-        });
-        if (stringFilters.length && dashboard[chartId].rows.length) {
-            const aggregatedObj = aggregate(dashboard[chartId], dashboard[chartId].buckets, null);
-            setBucketData({
-                name: dashboard[chartId].name,
-                xAxisFormat: aggregatedObj.xAxisFormat,
-                xAxisField: aggregatedObj.xAxisField,
-                xAxisLabel: aggregatedObj.xAxisLabel,
-                rows: aggregatedObj.bucketedRows,
-            });
-        }
-        if (!dashboard[chartId].rows.length && bucketData !== null) {
-            setBucketData(null);
-        }
-    }, [dashboard[chartId]]);
     const dateFilter = Object.values(dashboardFilters ?? {}).find((filter) => filter.filterType == 'date_range');
     const isPivot = dashboard[chartId]?.pivot || config?.pivot;
     const pivotTable = useMemo(() => {
@@ -274,25 +236,12 @@ const ChartUpdater = ({ colors, chartId, config, containerStyle, dashboard, disp
         return (_jsx(BarList, { data: pivotTable
                 ? pivotTable.rows
                 : config
-                    ? (config.bucketedRows &&
-                        config.bucketedRows.length > 0 &&
-                        config.bucketedRows) ||
-                        config.rows
-                    : bucketData && bucketData.rows
-                        ? bucketData.rows
-                        : dashboard[chartId].rows, theme: theme, yAxisFields: pivotTableYAxis
+                    ? config.rows
+                    : dashboard[chartId].rows, theme: theme, yAxisFields: pivotTableYAxis
                 ? pivotTableYAxis
                 : config
                     ? config.yAxisFields
-                    : dashboard[chartId].yAxisFields, colors: colors, xAxisField: config
-                ? config.xAxisField
-                : bucketData
-                    ? bucketData.xAxisField
-                    : dashboard[chartId].xAxisField, xAxisFormat: config
-                ? config.xAxisFormat
-                : bucketData
-                    ? bucketData.xAxisFormat
-                    : dashboard[chartId].xAxisFormat, containerStyle: containerStyle }));
+                    : dashboard[chartId].yAxisFields, colors: colors, xAxisField: config ? config.xAxisField : dashboard[chartId].xAxisField, xAxisFormat: config ? config.xAxisFormat : dashboard[chartId].xAxisFormat, containerStyle: containerStyle }));
     }
     const yAxisFields = pivotTableYAxis
         ? pivotTableYAxis
@@ -310,13 +259,8 @@ const ChartUpdater = ({ colors, chartId, config, containerStyle, dashboard, disp
     const data = (pivotTable
         ? pivotTable.rows
         : config
-            ? (config.bucketedRows &&
-                config.bucketedRows.length > 0 &&
-                config.bucketedRows) ||
-                config.rows
-            : bucketData && bucketData.rows && bucketData.rows.length > 0
-                ? bucketData.rows
-                : dashboard[chartId].rows)
+            ? config.rows
+            : dashboard[chartId].rows)
         // filter out any rows with a comparison key but no corresponding primary
         ?.filter((row) => Object.keys(row).every((key) => !key.startsWith('comparison_') ||
         (key.startsWith('comparison_') &&
@@ -324,23 +268,16 @@ const ChartUpdater = ({ colors, chartId, config, containerStyle, dashboard, disp
     if (chartTypes.includes('column')) {
         return (_jsx(BarChart, { colors: colors, theme: theme, isStacked: isPivot && yAxisFields.length > (dateFilter?.comparison ? 2 : 1), yAxisFields: yAxisFields, 
             // @ts-ignore
-            data: data, xAxisField: config
-                ? config.xAxisField
-                : bucketData
-                    ? bucketData.xAxisField
-                    : dashboard[chartId].xAxisField, xAxisLabel: config
-                ? config.xAxisLabel
-                : bucketData
-                    ? bucketData.xAxisLabel
-                    : dashboard[chartId].xAxisLabel, xAxisFormat: config
-                ? config.xAxisFormat
-                : bucketData
-                    ? bucketData.xAxisFormat
-                    : dashboard[chartId].xAxisFormat, containerStyle: containerStyle, comparison: dateFilter?.comparison, isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid }));
+            data: data, xAxisField: config ? config.xAxisField : dashboard[chartId].xAxisField, xAxisLabel: config ? config.xAxisLabel : dashboard[chartId].xAxisLabel, xAxisFormat: config ? config.xAxisFormat : dashboard[chartId].xAxisFormat, containerStyle: containerStyle, comparison: dateFilter?.comparison, isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid }));
     }
     if (chartTypes.includes('metric')) {
         const data = dashboard[chartId] ? dashboard[chartId] : config;
-        return (_jsx("div", { style: {
+        const isComparison = data.rows.length > 0 &&
+            Object.keys(data.rows[0]).includes(`comparison_${data.xAxisField}`);
+        const primaryMetricLabel = data?.filtersApplied?.date_range?.preset?.label;
+        const comparisonKey = data?.filtersApplied?.date_range?.comparisonRange?.value;
+        const comparisonLabel = COMPARISON_OPTIONS.find((opt) => opt.value === comparisonKey)?.text;
+        return (_jsxs("div", { style: {
                 fontFamily: theme?.fontFamily,
                 fontSize: 32,
                 color: theme?.primaryTextColor,
@@ -354,31 +291,62 @@ const ChartUpdater = ({ colors, chartId, config, containerStyle, dashboard, disp
                 overflow: 'hidden',
                 height: containerStyle?.height || '100%',
                 display: 'flex',
-                flexDirection: 'column',
-            }, children: data.rows.length > 0 &&
-                valueFormatter({
-                    value: data.rows[0][data.xAxisField],
-                    field: data.xAxisField,
-                    fields: [
-                        {
-                            field: data.xAxisField,
-                            format: data.xAxisFormat,
-                        },
-                    ],
-                }) }));
+                width: '100%',
+                flexDirection: 'row',
+            }, children: [_jsxs("div", { style: {
+                        display: 'flex',
+                        gap: 4,
+                        alignItems: 'baseline',
+                        marginRight: 'auto',
+                    }, children: [_jsx("span", { children: data.rows.length > 0 &&
+                                valueFormatter({
+                                    value: data.rows[0][data.xAxisField],
+                                    field: data.xAxisField,
+                                    fields: [
+                                        {
+                                            field: data.xAxisField,
+                                            format: data.xAxisFormat,
+                                        },
+                                    ],
+                                }) }), isComparison && (_jsx("span", { style: {
+                                fontSize: 13,
+                                fontWeight: '500',
+                                fontFamily: theme?.fontFamily,
+                                color: theme?.primaryTextColor,
+                                marginLeft: 2,
+                            }, children: primaryMetricLabel
+                                ? `in ${primaryMetricLabel.toLowerCase()}`
+                                : 'this period' }))] }), isComparison && (_jsxs("div", { style: {
+                        display: 'flex',
+                        gap: 4,
+                        alignItems: 'baseline',
+                        paddingTop: 4,
+                        color: theme?.secondaryTextColor,
+                    }, children: [_jsx("span", { style: {
+                                fontSize: 28,
+                                fontWeight: '500',
+                                fontFamily: theme?.fontFamily,
+                                color: theme?.secondaryTextColor,
+                            }, children: data.rows.length > 0 &&
+                                valueFormatter({
+                                    value: data.rows[0][`comparison_${data.xAxisField}`],
+                                    field: data.xAxisField,
+                                    fields: [
+                                        {
+                                            field: data.xAxisField,
+                                            format: data.xAxisFormat,
+                                        },
+                                    ],
+                                }) }), _jsx("span", { style: {
+                                fontSize: 13,
+                                fontWeight: '500',
+                                fontFamily: theme?.fontFamily,
+                                color: theme?.secondaryTextColor,
+                                marginLeft: 2,
+                            }, children: comparisonLabel
+                                ? 'in ' + comparisonLabel.toLowerCase()
+                                : 'previous period' })] }))] }));
     }
-    return (_jsx(LineChart, { colors: colors, yAxisFields: yAxisFields, data: data, xAxisField: config
-            ? config.xAxisField
-            : bucketData
-                ? bucketData.xAxisField
-                : dashboard[chartId].xAxisField, xAxisLabel: config
-            ? config.xAxisLabel
-            : bucketData
-                ? bucketData.xAxisLabel
-                : dashboard[chartId].xAxisLabel, xAxisFormat: config
-            ? config.xAxisFormat
-            : bucketData
-                ? bucketData.xAxisFormat
-                : dashboard[chartId].xAxisFormat, containerStyle: containerStyle, theme: theme, comparison: dateFilter?.comparison, isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid }));
+    return (_jsx(LineChart, { colors: colors, yAxisFields: yAxisFields, data: data, xAxisField: config ? config.xAxisField : dashboard[chartId].xAxisField, xAxisLabel: config ? config.xAxisLabel : dashboard[chartId].xAxisLabel, xAxisFormat: config ? config.xAxisFormat : dashboard[chartId].xAxisFormat, containerStyle: containerStyle, theme: theme, comparison: dateFilter?.comparison, isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid }));
 };
 export default Chart;

package/dist/esm/SQLEditor.d.ts

@@ -34,7 +34,6 @@ interface SQLEditorProps {
     addToDashboardButtonLabel?: string;
     onAddToDashboardComplete?: () => void;
     organizationName?: string;
-    onlyQueryQuillViews?: boolean;
 }
 interface TableComponentProps {
     rows: any[];
@@ -47,7 +46,7 @@ interface TextInputComponentProps {
     id: string;
     placeholder?: string;
 }
-export default function QueryEditor({ containerStyle, ButtonComponent, SecondaryButtonComponent, TextInputComponent, TableComponent, newQueryEnabled, LoadingComponent, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isEditMode, chartBuilderEnabled, showTableFormatOptions, showDateFieldOptions, showAccessControlOptions, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel, dashboardItem, organizationName, onlyQueryQuillViews, }: SQLEditorProps): import("react/jsx-runtime").JSX.Element;
+export default function QueryEditor({ containerStyle, ButtonComponent, SecondaryButtonComponent, TextInputComponent, TableComponent, newQueryEnabled, LoadingComponent, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isEditMode, chartBuilderEnabled, showTableFormatOptions, showDateFieldOptions, showAccessControlOptions, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel, dashboardItem, organizationName, }: SQLEditorProps): import("react/jsx-runtime").JSX.Element;
 export declare const SchemaListComponent: ({ schema, theme, loading, LoadingComponent, width, }: {
     schema: any;
     theme: any;

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

@@ -1 +1 @@
-{"version":3,"file":"SQLEditor.d.ts","sourceRoot":"","sources":["../../src/SQLEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAUxE,wBAAgB,qBAAqB,CAAC,MAAM,KAAA;;;;;EAwE3C;AA2BD,UAAU,oBAAoB;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,cAAc;IACtB,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;IAEpC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC/D,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAExE,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC;IACrE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC7D,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;IACtC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAQD,UAAU,mBAAmB;IAC3B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AA+ED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,cAAoC,EACpC,eAAe,EACf,wBAAwB,EACxB,kBAAkB,EAClB,cAAc,EACd,eAAuB,EACvB,gBAAgB,EAChB,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,eAAe,EACf,cAAc,EACd,UAAkB,EAClB,mBAA2B,EAC3B,sBAA8B,EAC9B,oBAA4B,EAC5B,wBAAgC,EAChC,oBAAoB,EACpB,iBAAiB,EACjB,uBAAuB,EACvB,wBAAwB,EACxB,yBAA8C,EAC9C,aAAyB,EACzB,gBAA4B,EAC5B,mBAA2B,GAC5B,EAAE,cAAc,2CAwWhB;AA8LD,eAAO,MAAM,mBAAmB;;;;;;6CAqG/B,CAAC"}
+{"version":3,"file":"SQLEditor.d.ts","sourceRoot":"","sources":["../../src/SQLEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAUxE,wBAAgB,qBAAqB,CAAC,MAAM,KAAA;;;;;EAwE3C;AA2BD,UAAU,oBAAoB;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,cAAc;IACtB,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;IAEpC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC/D,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAExE,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC;IACrE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC7D,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;IACtC,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAQD,UAAU,mBAAmB;IAC3B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AA+ED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,cAAoC,EACpC,eAAe,EACf,wBAAwB,EACxB,kBAAkB,EAClB,cAAc,EACd,eAAuB,EACvB,gBAAgB,EAChB,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,eAAe,EACf,cAAc,EACd,UAAkB,EAClB,mBAA2B,EAC3B,sBAA8B,EAC9B,oBAA4B,EAC5B,wBAAgC,EAChC,oBAAoB,EACpB,iBAAiB,EACjB,uBAAuB,EACvB,wBAAwB,EACxB,yBAA8C,EAC9C,aAAyB,EACzB,gBAA4B,GAC7B,EAAE,cAAc,2CAgVhB;AA8LD,eAAO,MAAM,mBAAmB;;;;;;6CAqG/B,CAAC"}

package/dist/esm/SQLEditor.js

@@ -141,7 +141,7 @@ const QuillTextInput = ({ onChange, value, id, placeholder, theme, }) => {
             borderRadius: '6px',
         }, id: id, onChange: onChange, value: value, placeholder: placeholder }));
 };
-export default function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent, SecondaryButtonComponent, TextInputComponent, TableComponent, 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, onlyQueryQuillViews = false, }) {
+export default function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent, SecondaryButtonComponent, TextInputComponent, TableComponent, 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, }) {
     const [sqlPrompt, setSqlPrompt] = useState('');
     const [isOpen, setIsOpen] = useState(false);
     const [client] = useContext(ClientContext);
@@ -203,21 +203,6 @@ export default function QueryEditor({ containerStyle = { height: '100vh' }, Butt
         try {
             setSqlQueryLoading(true);
             setErrorMessage('');
-            if (onlyQueryQuillViews) {
-                const tableAlias = query.match(/(\w+) AS \(/gi)?.map((match) => match.split(' ')[0]) ||
-                    [];
-                const tableNames = query
-                    .match(/FROM\s+(\w+)/gi)
-                    .map((match) => match.split(' ')[1])
-                    .filter((tableName) => !tableAlias.includes(tableName) &&
-                    tableName?.toLocaleLowerCase() !== '(select');
-                const unselectableTables = tableNames.filter((tableName) => !schema.some((table) => table.displayName === tableName));
-                if (unselectableTables.length !== 0) {
-                    setSqlQueryLoading(false);
-                    setErrorMessage('No Quill SQL views with the name ' + unselectableTables[0]);
-                    return;
-                }
-            }
             const hostedBody = {
                 metadata: {
                     query,

package/dist/esm/components/Dashboard/MetricComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MetricComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/MetricComponent.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,CAqGnB"}
+{"version":3,"file":"MetricComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/MetricComponent.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,CAsGnB"}

package/dist/esm/components/Dashboard/MetricComponent.js

@@ -56,6 +56,7 @@ export default function DashboardItem({ dashboardItem, onClickDashboardItem, the
                                     }, children: 'view report →' })) : null] }), _jsx("div", { style: {
                                 padding: 0,
                                 height: '100%',
+                                width: '100%',
                                 boxSizing: 'content-box',
                             }, children: children })] }) }) }) }, dashboardItem?.name));
 }

package/package.json

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