@quillsql/react 2.12.23 → 2.12.25

package/dist/cjs/Chart.d.ts

@@ -2,6 +2,29 @@
 import { QuillTheme } from './QuillProvider';
 import { type QuillReport } from './Dashboard';
 import { Filter } from './models/Filter';
+interface BaseChartProps {
+    colors?: string[];
+    containerStyle?: React.CSSProperties;
+    className?: string;
+    isAnimationActive?: boolean;
+    hideXAxis?: boolean;
+    hideYAxis?: boolean;
+    hideCartesianGrid?: boolean;
+    hideDateRangeFilter?: boolean;
+    hideHorizontalCartesianGrid?: boolean;
+    hideVerticalCartesianGrid?: boolean;
+    hideSubsequentXAxisTicks?: boolean;
+    cartesianGridLineStyle?: 'solid' | 'dashed';
+    cartesianGridLineColor?: string;
+    comparisonLineStyle?: 'solid' | 'dashed';
+    mapColorsToFields?: (_report: QuillReport, _theme: QuillTheme) => ColorMapType;
+    LoadingComponent?: () => JSX.Element;
+    filters?: Filter[];
+    onClickChartElement?: (data: any) => void;
+}
+interface WithConfig extends BaseChartProps {
+    config: QuillReport | any;
+}
 export declare function isEquivalent(filters1: any[], filters2: any[]): boolean;
 export declare function didFiltersChange(dashboardItem: any, filters: any[]): boolean;
 export type ColorMapType = {
@@ -158,5 +181,25 @@ export interface ChartProps {
  * @see https://docs.quillsql.com/components/chart
  */
 declare const Chart: (props: ChartProps) => import("react/jsx-runtime").JSX.Element;
+interface ChartDisplayProps extends WithConfig {
+    loading: boolean;
+    paginating?: boolean;
+    error?: string;
+    isComparison?: boolean;
+    colorMap?: ColorMapType;
+    reportId?: string;
+    onPageChange?: (page: {
+        currentPage: number;
+        rowsPerPage: number;
+    }) => void;
+    onSortChange?: (sort: {
+        field: string;
+        direction: string;
+    }) => void;
+    onClickChartElement?: (data: any) => void;
+    dateBucket?: string;
+    overrideTheme?: QuillTheme;
+}
+export declare const ChartDisplay: ({ reportId, config, colors, className, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, hideDateRangeFilter, hideHorizontalCartesianGrid, hideVerticalCartesianGrid, hideSubsequentXAxisTicks, cartesianGridLineStyle, cartesianGridLineColor, comparisonLineStyle, isAnimationActive, loading, paginating, error, isComparison, colorMap, LoadingComponent, onPageChange, onSortChange, onClickChartElement, dateBucket, overrideTheme, }: ChartDisplayProps) => import("react/jsx-runtime").JSX.Element;
 export default Chart;
 //# sourceMappingURL=Chart.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAe7C,OAAO,EAAuB,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AA6DzC,wBAAgB,YAAY,CAAC,QAAQ,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,WA4F5D;AAED,wBAAgB,gBAAgB,CAAC,aAAa,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,WAKlE;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,OAAO,EAAE,MAAM,CAAC;QAChB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,uBAAuB,CAAC,EAAE,MAAM,CAAC;QACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;KACjC,CAAC;CACH,CAAC;AAeF;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,WAAW,GAAG,GAAG,CAAC;IAE3B;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAElB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,2BAA2B,CAAC,EAAE,OAAO,CAAC;IAEtC;;OAEG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IAEpC;;OAEG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IAEnC;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAEzC;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAE5C;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAEhC;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,KAAK,YAAY,CAAC;IAE7E;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IAErC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAErC,4EAA4E;IAC5E,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IAEnB,qEAAqE;IACrE,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAE1C,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,KAAK,UAAW,UAAU,4CAgD/B,CAAC;AA+yBF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/Chart.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.didFiltersChange = exports.isEquivalent = void 0;
+exports.ChartDisplay = exports.didFiltersChange = exports.isEquivalent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable no-unused-vars */
 const react_1 = require("react");
@@ -146,7 +146,7 @@ const Chart = (props) => {
     let data = props;
     if ('config' in data) {
         const isLoading = Boolean(!data.config);
-        return ((0, jsx_runtime_1.jsx)(ChartDisplay, { ...data, error: isLoading || data.config?.rows ? undefined : 'No rows found', loading: isLoading, isComparison: Boolean(data?.config?.compareRows?.length), onClickChartElement: props.onClickChartElement }));
+        return ((0, jsx_runtime_1.jsx)(exports.ChartDisplay, { ...data, error: isLoading || data.config?.rows ? undefined : 'No rows found', loading: isLoading, isComparison: Boolean(data?.config?.compareRows?.length), onClickChartElement: props.onClickChartElement }));
     }
     const theme = (0, useTheme_1.default)();
     const chartColors = (0, react_1.useMemo)(() => {
@@ -369,15 +369,18 @@ const ChartUpdater = ({ colors, reportId, className, containerStyle, isAnimation
         setInitialLoad(false);
         getChartData();
     }, [specificDashboardFilter, client, reportId]);
-    return ((0, jsx_runtime_1.jsx)(ChartDisplay, { config: report, reportId: reportId, colors: colors, className: className, containerStyle: containerStyle, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, hideHorizontalCartesianGrid: hideHorizontalCartesianGrid, hideVerticalCartesianGrid: hideVerticalCartesianGrid, hideSubsequentXAxisTicks: hideSubsequentXAxisTicks, cartesianGridLineStyle: cartesianGridLineStyle, cartesianGridLineColor: cartesianGridLineColor, hideDateRangeFilter: hideDateRangeFilter, comparisonLineStyle: comparisonLineStyle, isAnimationActive: isAnimationActive, isComparison: isComparison, loading: loading || initialLoad, paginating: paginating, error: error, colorMap: colorMap, LoadingComponent: LoadingComponent, onPageChange: onPageChange, onSortChange: onSortChange, onClickChartElement: onClickChartElement }));
+    return ((0, jsx_runtime_1.jsx)(exports.ChartDisplay, { config: report, reportId: reportId, colors: colors, className: className, containerStyle: containerStyle, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, hideHorizontalCartesianGrid: hideHorizontalCartesianGrid, hideVerticalCartesianGrid: hideVerticalCartesianGrid, hideSubsequentXAxisTicks: hideSubsequentXAxisTicks, cartesianGridLineStyle: cartesianGridLineStyle, cartesianGridLineColor: cartesianGridLineColor, hideDateRangeFilter: hideDateRangeFilter, comparisonLineStyle: comparisonLineStyle, isAnimationActive: isAnimationActive, isComparison: isComparison, loading: loading || initialLoad, paginating: paginating, error: error, colorMap: colorMap, LoadingComponent: LoadingComponent, onPageChange: onPageChange, onSortChange: onSortChange, onClickChartElement: onClickChartElement }));
 };
-const ChartDisplay = ({ reportId, config, colors, className, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, hideDateRangeFilter = false, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', cartesianGridLineColor, comparisonLineStyle, isAnimationActive, loading = false, paginating = false, error = undefined, isComparison = false, colorMap, LoadingComponent = ChartSkeleton_1.QuillLoadingSkeleton, onPageChange, onSortChange, onClickChartElement, dateBucket, }) => {
+const ChartDisplay = ({ reportId, config, colors, className, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, hideDateRangeFilter = false, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', cartesianGridLineColor, comparisonLineStyle, isAnimationActive, loading = false, paginating = false, error = undefined, isComparison = false, colorMap, LoadingComponent = ChartSkeleton_1.QuillLoadingSkeleton, onPageChange, onSortChange, onClickChartElement, dateBucket, overrideTheme, }) => {
     const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
     const specificDashboardFilter = (0, react_1.useMemo)(() => {
+        if (!dashboardFilters) {
+            return [];
+        }
         return dashboardFilters.filter((f) => f && config && config.dashboardName === f.dashboardName);
     }, [dashboardFilters]);
     const { downloadCSV } = (0, useExport_1.useExport)(reportId);
-    const theme = (0, useTheme_1.default)();
+    const theme = overrideTheme ?? (0, useTheme_1.default)();
     const chartColors = (0, react_1.useMemo)(() => {
         return colors?.length
             ? colors
@@ -426,7 +429,10 @@ const ChartDisplay = ({ reportId, config, colors, className, containerStyle, hid
             return config?.pivotColumns ?? config?.yAxisFields ?? [];
         }
     };
-    const yAxisFields = getYAxisFields();
+    const [yAxisFields, setYAxisFields] = (0, react_1.useState)(getYAxisFields());
+    (0, react_1.useEffect)(() => {
+        setYAxisFields(getYAxisFields());
+    }, [config, specificDashboardFilter]);
     if (error) {
         return (0, jsx_runtime_1.jsx)(ChartError_1.default, { className: className, containerStyle: containerStyle });
     }
@@ -436,7 +442,7 @@ const ChartDisplay = ({ reportId, config, colors, className, containerStyle, hid
         config?.chartType !== 'table' &&
         rows &&
         rows.length > MAX_ROWS_FOR_GENERIC_TABLE) {
-        return ((0, jsx_runtime_1.jsx)(ChartError_1.default, { className: className, containerStyle: containerStyle, label: "Charts can only display 300 rows. Please add a pivot or modify the query." }));
+        return ((0, jsx_runtime_1.jsx)(ChartError_1.default, { className: className, containerStyle: containerStyle, label: `Charts can only display ${MAX_ROWS_FOR_GENERIC_TABLE} rows. Please add a pivot or modify the query.` }));
     }
     else if (!config || loading) {
         return ((0, jsx_runtime_1.jsx)("div", { className: className, style: containerStyle, children: (0, jsx_runtime_1.jsx)(LoadingComponent, {}) }));
@@ -652,6 +658,7 @@ const ChartDisplay = ({ reportId, config, colors, className, containerStyle, hid
     }
     return ((0, jsx_runtime_1.jsx)(LineChart_1.default, { colors: chartColors, colorMap: colorMap, yAxisFields: yAxisFields.sort(sortComparisonFirst), data: lineChartData, xAxisField: config.xAxisField, xAxisLabel: config.xAxisLabel, xAxisFormat: config.xAxisFormat, containerStyle: containerStyle, className: className, theme: theme, comparison: dateFilter?.comparison, isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, hideHorizontalCartesianGrid: hideHorizontalCartesianGrid, hideVerticalCartesianGrid: hideVerticalCartesianGrid, hideSubsequentXAxisTicks: hideSubsequentXAxisTicks, cartesianGridLineStyle: cartesianGridLineStyle ?? 'solid', comparisonLineStyle: comparisonLineStyle ?? 'solid', cartesianGridLineColor: cartesianGridLineColor, onClickChartElement: onClickChartElement, dateFilter: dateFilter }));
 };
+exports.ChartDisplay = ChartDisplay;
 // Sort to put comparison first (ie. underneath) primary.
 const sortComparisonFirst = (a, b) => {
     const key = 'comparison_';

package/dist/cjs/Dashboard.js

@@ -50,7 +50,7 @@ const defaultChartContainerStyles = {
     display: 'flex',
     width: '100%',
     minHeight: 300,
-    height: 400,
+    height: 300,
 };
 const defaultFilterContainerStyles = {
     display: 'flex',

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

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAc9D,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAyBD;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,IAAI,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,EAAE,CAAC;IAEhC;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IAEJ;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IAErC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,QAAA,MAAM,KAAK,UAAW,UAAU,4CAkC/B,CAAC;AA4GF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAe9D,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAyBD;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,IAAI,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,EAAE,CAAC;IAEhC;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IAEJ;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IAErC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,QAAA,MAAM,KAAK,UAAW,UAAU,4CAkC/B,CAAC;AA+GF,eAAe,KAAK,CAAC"}

package/dist/cjs/Table.js

@@ -12,6 +12,7 @@ const QuillTable_1 = __importDefault(require("./components/QuillTable"));
 const useFormat_1 = require("./hooks/useFormat");
 const useExport_1 = require("./hooks/useExport");
 const errorProcessing_1 = require("./utils/errorProcessing");
+const Chart_1 = require("./Chart");
 /**
  * ### Quill Table
  *
@@ -57,9 +58,10 @@ const ChartUpdater = ({ reportId, containerStyle, className, dashboard, dispatch
     const specificDashboardFilter = (0, react_1.useMemo)(() => {
         return dashboardFilters
             .sort((filter) => (filter.filterType === 'date_range' ? -1 : 1))
-            .filter((f) => 
-        // @ts-ignore
-        dashboard && dashboard[reportId] && f && f.dashboardName === dashboard[reportId].dashboardName);
+            .filter((f) => dashboard &&
+            dashboard[reportId] &&
+            f &&
+            f.dashboardName === dashboard[reportId].dashboardName);
     }, [dashboardFilters, dashboard]);
     const { rows, loading } = (0, useFormat_1.useMemoizedRows)(reportId);
     const { downloadCSV } = (0, useExport_1.useExport)(reportId);
@@ -67,6 +69,9 @@ const ChartUpdater = ({ reportId, containerStyle, className, dashboard, dispatch
     (0, react_1.useEffect)(() => {
         let isSubscribed = true;
         async function getChartOptions() {
+            if (!(0, Chart_1.didFiltersChange)(dashboard[reportId], specificDashboardFilter)) {
+                return;
+            }
             if (isSubscribed) {
                 try {
                     const hostedBody = {
@@ -110,10 +115,6 @@ const ChartUpdater = ({ reportId, containerStyle, className, dashboard, dispatch
             isSubscribed = false;
         };
     }, [specificDashboardFilter, client.customerId, reportId]);
-    return ((0, jsx_runtime_1.jsx)(QuillTable_1.default, { hideCSVDownloadButton: hideCSVDownloadButton, 
-        // @ts-ignore
-        columns: dashboard[reportId]?.columns || [], 
-        // @ts-ignore
-        rows: rows || dashboard[reportId]?.rows || [], containerStyle: containerStyle, className: className, LoadingComponent: LoadingComponent, isLoading: loading, downloadCSV: downloadCSV }));
+    return ((0, jsx_runtime_1.jsx)(QuillTable_1.default, { hideCSVDownloadButton: hideCSVDownloadButton, columns: dashboard[reportId]?.columns || [], rows: rows || dashboard[reportId]?.rows || [], containerStyle: containerStyle, className: className, LoadingComponent: LoadingComponent, isLoading: loading, downloadCSV: downloadCSV }));
 };
 exports.default = Table;

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

@@ -13,7 +13,7 @@ const ChartTooltip_1 = __importDefault(require("../../components/Chart/ChartTool
 const getDomain_1 = __importDefault(require("../../utils/getDomain"));
 const react_1 = require("react");
 function BarChart({ colors, colorMap, yAxisFields, data, containerStyle, className, xAxisField, xAxisFormat, theme, comparison, isStacked, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, onClickChartElement, dateFilter, }) {
-    const [formattedData, setFormattedData] = (0, react_1.useState)([]);
+    const [formattedData, setFormattedData] = (0, react_1.useState)(data);
     (0, react_1.useEffect)(() => {
         if (!data || data.length === 0) {
             return;

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

@@ -14,7 +14,7 @@ const getDomain_1 = __importDefault(require("../../utils/getDomain"));
 const react_1 = require("react");
 const crypto_1 = require("../../utils/crypto");
 function LineChart({ colors, colorMap = {}, yAxisFields, data, containerStyle, className, xAxisField, xAxisFormat, theme, comparison, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', comparisonLineStyle = 'solid', cartesianGridLineColor, onClickChartElement = () => { }, dateFilter, }) {
-    const [formattedData, setFormattedData] = (0, react_1.useState)([]);
+    const [formattedData, setFormattedData] = (0, react_1.useState)(data);
     (0, react_1.useEffect)(() => {
         if (!data || data.length === 0) {
             return;

package/dist/cjs/hooks/useExport.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useExport.d.ts","sourceRoot":"","sources":["../../../src/hooks/useExport.ts"],"names":[],"mappings":"AAkBA,eAAO,MAAM,SAAS,cAAe,MAAM;;;;CAmD1C,CAAC"}
+{"version":3,"file":"useExport.d.ts","sourceRoot":"","sources":["../../../src/hooks/useExport.tsx"],"names":[],"mappings":"AA6EA,eAAO,MAAM,SAAS,cAAe,MAAM;;;;CAuC1C,CAAC"}

package/dist/cjs/hooks/useExport.js

@@ -1,12 +1,55 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useExport = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const csv_1 = require("../utils/csv");
 const react_1 = require("react");
 const dataFetcher_1 = require("../utils/dataFetcher");
 const Context_1 = require("../Context");
+const react_dom_1 = __importDefault(require("react-dom"));
+const Chart_1 = require("../Chart");
+const useTheme_1 = __importDefault(require("./useTheme"));
+const valueFormatter_1 = require("../utils/valueFormatter");
+const dashboard_1 = require("../utils/dashboard");
+const react_to_print_1 = require("react-to-print");
+async function getExportData(client, dashboardFilters, reportId) {
+    const minimalFilters = Object.values(dashboardFilters).length
+        ? Object.values(dashboardFilters).map((filter) => {
+            const newFilter = { ...filter };
+            if (newFilter.filterType === 'date_range') {
+                delete newFilter['field'];
+                delete newFilter['options'];
+                delete newFilter['selectedValue'];
+            }
+            return newFilter;
+        })
+        : [];
+    const hostedBody = {
+        metadata: {
+            dashboardItemId: reportId,
+            orgId: client.customerId || '*',
+            clientId: client.publicKey,
+            task: 'item',
+            databaseType: client?.databaseType,
+            filters: minimalFilters,
+        },
+    };
+    const cloudBody = {
+        id: reportId,
+    };
+    const resp = await (0, dataFetcher_1.getData)(client, 'itempost', 'same-origin', hostedBody, cloudBody);
+    const cleanedReport = await (0, dashboard_1.cleanDashboardItem)(resp, dashboardFilters);
+    if (cleanedReport.chartType === 'table' && cleanedReport.pivot) {
+        cleanedReport.columns = cleanedReport.yAxisFields;
+    }
+    return cleanedReport;
+}
 const useExport = (reportId) => {
     const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
+    const theme = (0, useTheme_1.default)();
     const [client] = (0, react_1.useContext)(Context_1.ClientContext);
     const [isLoading, setIsLoading] = (0, react_1.useState)(false);
     if (!reportId) {
@@ -15,31 +58,7 @@ const useExport = (reportId) => {
     return {
         downloadCSV: async () => {
             setIsLoading(true);
-            const minimalFilters = Object.values(dashboardFilters).length
-                ? Object.values(dashboardFilters).map((filter) => {
-                    const newFilter = { ...filter };
-                    if (newFilter.filterType === 'date_range') {
-                        delete newFilter['field'];
-                        delete newFilter['options'];
-                        delete newFilter['selectedValue'];
-                    }
-                    return newFilter;
-                })
-                : [];
-            const hostedBody = {
-                metadata: {
-                    dashboardItemId: reportId,
-                    orgId: client.customerId || '*',
-                    clientId: client.publicKey,
-                    task: 'item',
-                    databaseType: client?.databaseType,
-                    filters: minimalFilters,
-                },
-            };
-            const cloudBody = {
-                id: reportId,
-            };
-            const resp = await (0, dataFetcher_1.getData)(client, 'itempost', 'same-origin', hostedBody, cloudBody);
+            const resp = await getExportData(client, dashboardFilters, reportId);
             (0, csv_1.downloadCSV)({
                 rows: resp.rows,
                 fields: resp.columns,
@@ -47,8 +66,65 @@ const useExport = (reportId) => {
             });
             setIsLoading(false);
         },
-        downloadPDF: () => { },
+        downloadPDF: async () => {
+            setIsLoading(true);
+            const resp = await getExportData(client, dashboardFilters, reportId);
+            const iframe = document.createElement('iframe');
+            document.body.appendChild(iframe);
+            if (iframe && iframe.contentDocument) {
+                react_dom_1.default.render((0, jsx_runtime_1.jsx)(PDFDetail, { report: resp, theme: theme }), iframe.contentDocument.body);
+            }
+            // delete the iframe
+            setTimeout(() => {
+                document.body.removeChild(iframe);
+            }, 1000);
+            setIsLoading(false);
+        },
         isLoading,
     };
 };
 exports.useExport = useExport;
+function PDFDetail({ report, theme }) {
+    const componentRef = (0, react_1.useRef)(null);
+    const handlePrint = (0, react_to_print_1.useReactToPrint)({
+        content: () => componentRef.current,
+        pageStyle: `@page {
+      size: letter;
+      margin: 0;
+    }
+  
+    body {
+      margin: 2rem;
+    }`,
+    });
+    (0, react_1.useLayoutEffect)(() => {
+        setTimeout(() => handlePrint(), 1500);
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: componentRef, style: { display: 'flex', flexDirection: 'column', margin: '2rem' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: (0, jsx_runtime_1.jsx)("h2", { style: {
+                        fontSize: 18,
+                        fontWeight: '600',
+                        textAlign: 'left',
+                        paddingLeft: 10,
+                        color: theme?.primaryTextColor,
+                    }, children: report.name }) }), (0, jsx_runtime_1.jsxs)("div", { style: { paddingLeft: 20, paddingRight: 20 }, children: [report.chartType !== 'table' && ((0, jsx_runtime_1.jsx)(Chart_1.ChartDisplay, { overrideTheme: theme, config: report, containerStyle: {
+                            display: 'flex',
+                            height: 400,
+                        }, loading: false, isAnimationActive: false })), (0, jsx_runtime_1.jsx)("div", { style: {
+                            border: '1px solid',
+                            borderRadius: '4px',
+                            borderStyle: 'none',
+                        }, children: (0, jsx_runtime_1.jsxs)("table", { style: {
+                                fontFamily: 'sans-serif',
+                                width: '100%',
+                                borderCollapse: 'collapse',
+                                borderStyle: 'none',
+                            }, children: [(0, jsx_runtime_1.jsx)("thead", { style: {
+                                        textAlign: 'left',
+                                        textOverflow: 'ellipsis',
+                                        whiteSpace: 'nowrap',
+                                        overflow: 'hidden',
+                                    }, children: (0, jsx_runtime_1.jsx)("tr", { children: report.columns.map((col, colIndex) => ((0, jsx_runtime_1.jsx)("th", { style: { padding: '2px', paddingLeft: '3px' }, children: col.label }, 'head' + colIndex))) }) }), (0, jsx_runtime_1.jsx)("tbody", { children: report.rows.map((row, rowIndex) => ((0, jsx_runtime_1.jsx)("tr", { children: report.columns.map((col, colIndex) => ((0, jsx_runtime_1.jsx)("td", { style: { padding: '2px', paddingLeft: '3px' }, children: (0, valueFormatter_1.quillFormat)({
+                                                value: row[col.field],
+                                                format: col.format,
+                                            }) }, 'cell' + col.field + colIndex + rowIndex))) }, 'row' + rowIndex))) })] }) })] })] }));
+}

package/dist/cjs/utils/merge.js

@@ -19,14 +19,6 @@ function mergeForwards(resp) {
         }
         j++;
     }
-    while (j < compRows.length) {
-        const obj = {};
-        for (const [key, value] of Object.entries(compRows[j])) {
-            obj[`comparison_${key}`] = value;
-        }
-        resp.rows.push(obj);
-        j++;
-    }
 }
 // eslint-disable-next-line no-unused-vars
 function mergeBackwards(resp) {

package/dist/esm/Chart.d.ts

@@ -2,6 +2,29 @@
 import { QuillTheme } from './QuillProvider';
 import { type QuillReport } from './Dashboard';
 import { Filter } from './models/Filter';
+interface BaseChartProps {
+    colors?: string[];
+    containerStyle?: React.CSSProperties;
+    className?: string;
+    isAnimationActive?: boolean;
+    hideXAxis?: boolean;
+    hideYAxis?: boolean;
+    hideCartesianGrid?: boolean;
+    hideDateRangeFilter?: boolean;
+    hideHorizontalCartesianGrid?: boolean;
+    hideVerticalCartesianGrid?: boolean;
+    hideSubsequentXAxisTicks?: boolean;
+    cartesianGridLineStyle?: 'solid' | 'dashed';
+    cartesianGridLineColor?: string;
+    comparisonLineStyle?: 'solid' | 'dashed';
+    mapColorsToFields?: (_report: QuillReport, _theme: QuillTheme) => ColorMapType;
+    LoadingComponent?: () => JSX.Element;
+    filters?: Filter[];
+    onClickChartElement?: (data: any) => void;
+}
+interface WithConfig extends BaseChartProps {
+    config: QuillReport | any;
+}
 export declare function isEquivalent(filters1: any[], filters2: any[]): boolean;
 export declare function didFiltersChange(dashboardItem: any, filters: any[]): boolean;
 export type ColorMapType = {
@@ -158,5 +181,25 @@ export interface ChartProps {
  * @see https://docs.quillsql.com/components/chart
  */
 declare const Chart: (props: ChartProps) => import("react/jsx-runtime").JSX.Element;
+interface ChartDisplayProps extends WithConfig {
+    loading: boolean;
+    paginating?: boolean;
+    error?: string;
+    isComparison?: boolean;
+    colorMap?: ColorMapType;
+    reportId?: string;
+    onPageChange?: (page: {
+        currentPage: number;
+        rowsPerPage: number;
+    }) => void;
+    onSortChange?: (sort: {
+        field: string;
+        direction: string;
+    }) => void;
+    onClickChartElement?: (data: any) => void;
+    dateBucket?: string;
+    overrideTheme?: QuillTheme;
+}
+export declare const ChartDisplay: ({ reportId, config, colors, className, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, hideDateRangeFilter, hideHorizontalCartesianGrid, hideVerticalCartesianGrid, hideSubsequentXAxisTicks, cartesianGridLineStyle, cartesianGridLineColor, comparisonLineStyle, isAnimationActive, loading, paginating, error, isComparison, colorMap, LoadingComponent, onPageChange, onSortChange, onClickChartElement, dateBucket, overrideTheme, }: ChartDisplayProps) => import("react/jsx-runtime").JSX.Element;
 export default Chart;
 //# sourceMappingURL=Chart.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAe7C,OAAO,EAAuB,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AA6DzC,wBAAgB,YAAY,CAAC,QAAQ,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,WA4F5D;AAED,wBAAgB,gBAAgB,CAAC,aAAa,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,WAKlE;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,OAAO,EAAE,MAAM,CAAC;QAChB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,uBAAuB,CAAC,EAAE,MAAM,CAAC;QACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;KACjC,CAAC;CACH,CAAC;AAeF;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,WAAW,GAAG,GAAG,CAAC;IAE3B;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAElB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,2BAA2B,CAAC,EAAE,OAAO,CAAC;IAEtC;;OAEG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IAEpC;;OAEG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IAEnC;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAEzC;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAE5C;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAEhC;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,KAAK,YAAY,CAAC;IAE7E;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IAErC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAErC,4EAA4E;IAC5E,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IAEnB,qEAAqE;IACrE,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAE1C,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,KAAK,UAAW,UAAU,4CAgD/B,CAAC;AA+yBF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart.tsx"],"names":[],"mappings":"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"}

package/dist/esm/Chart.js

@@ -363,13 +363,16 @@ const ChartUpdater = ({ colors, reportId, className, containerStyle, isAnimation
     }, [specificDashboardFilter, client, reportId]);
     return (_jsx(ChartDisplay, { config: report, reportId: reportId, colors: colors, className: className, containerStyle: containerStyle, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, hideHorizontalCartesianGrid: hideHorizontalCartesianGrid, hideVerticalCartesianGrid: hideVerticalCartesianGrid, hideSubsequentXAxisTicks: hideSubsequentXAxisTicks, cartesianGridLineStyle: cartesianGridLineStyle, cartesianGridLineColor: cartesianGridLineColor, hideDateRangeFilter: hideDateRangeFilter, comparisonLineStyle: comparisonLineStyle, isAnimationActive: isAnimationActive, isComparison: isComparison, loading: loading || initialLoad, paginating: paginating, error: error, colorMap: colorMap, LoadingComponent: LoadingComponent, onPageChange: onPageChange, onSortChange: onSortChange, onClickChartElement: onClickChartElement }));
 };
-const ChartDisplay = ({ reportId, config, colors, className, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, hideDateRangeFilter = false, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', cartesianGridLineColor, comparisonLineStyle, isAnimationActive, loading = false, paginating = false, error = undefined, isComparison = false, colorMap, LoadingComponent = QuillLoadingSkeleton, onPageChange, onSortChange, onClickChartElement, dateBucket, }) => {
+export const ChartDisplay = ({ reportId, config, colors, className, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, hideDateRangeFilter = false, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', cartesianGridLineColor, comparisonLineStyle, isAnimationActive, loading = false, paginating = false, error = undefined, isComparison = false, colorMap, LoadingComponent = QuillLoadingSkeleton, onPageChange, onSortChange, onClickChartElement, dateBucket, overrideTheme, }) => {
     const { dashboardFilters } = useContext(DashboardFiltersContext);
     const specificDashboardFilter = useMemo(() => {
+        if (!dashboardFilters) {
+            return [];
+        }
         return dashboardFilters.filter((f) => f && config && config.dashboardName === f.dashboardName);
     }, [dashboardFilters]);
     const { downloadCSV } = useExport(reportId);
-    const theme = useTheme();
+    const theme = overrideTheme ?? useTheme();
     const chartColors = useMemo(() => {
         return colors?.length
             ? colors
@@ -418,7 +421,10 @@ const ChartDisplay = ({ reportId, config, colors, className, containerStyle, hid
             return config?.pivotColumns ?? config?.yAxisFields ?? [];
         }
     };
-    const yAxisFields = getYAxisFields();
+    const [yAxisFields, setYAxisFields] = useState(getYAxisFields());
+    useEffect(() => {
+        setYAxisFields(getYAxisFields());
+    }, [config, specificDashboardFilter]);
     if (error) {
         return _jsx(ChartError, { className: className, containerStyle: containerStyle });
     }
@@ -428,7 +434,7 @@ const ChartDisplay = ({ reportId, config, colors, className, containerStyle, hid
         config?.chartType !== 'table' &&
         rows &&
         rows.length > MAX_ROWS_FOR_GENERIC_TABLE) {
-        return (_jsx(ChartError, { className: className, containerStyle: containerStyle, label: "Charts can only display 300 rows. Please add a pivot or modify the query." }));
+        return (_jsx(ChartError, { className: className, containerStyle: containerStyle, label: `Charts can only display ${MAX_ROWS_FOR_GENERIC_TABLE} rows. Please add a pivot or modify the query.` }));
     }
     else if (!config || loading) {
         return (_jsx("div", { className: className, style: containerStyle, children: _jsx(LoadingComponent, {}) }));

package/dist/esm/Dashboard.js

@@ -22,7 +22,7 @@ const defaultChartContainerStyles = {
     display: 'flex',
     width: '100%',
     minHeight: 300,
-    height: 400,
+    height: 300,
 };
 const defaultFilterContainerStyles = {
     display: 'flex',

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

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAc9D,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAyBD;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,IAAI,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,EAAE,CAAC;IAEhC;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IAEJ;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IAErC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,QAAA,MAAM,KAAK,UAAW,UAAU,4CAkC/B,CAAC;AA4GF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAe9D,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAyBD;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,IAAI,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,EAAE,CAAC;IAEhC;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IAEJ;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IAErC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,QAAA,MAAM,KAAK,UAAW,UAAU,4CAkC/B,CAAC;AA+GF,eAAe,KAAK,CAAC"}

package/dist/esm/Table.js

@@ -7,6 +7,7 @@ import QuillTable from './components/QuillTable';
 import { useMemoizedRows } from './hooks/useFormat';
 import { useExport } from './hooks/useExport';
 import { processFilterErrorList } from './utils/errorProcessing';
+import { didFiltersChange } from './Chart';
 /**
  * ### Quill Table
  *
@@ -52,9 +53,10 @@ const ChartUpdater = ({ reportId, containerStyle, className, dashboard, dispatch
     const specificDashboardFilter = useMemo(() => {
         return dashboardFilters
             .sort((filter) => (filter.filterType === 'date_range' ? -1 : 1))
-            .filter((f) => 
-        // @ts-ignore
-        dashboard && dashboard[reportId] && f && f.dashboardName === dashboard[reportId].dashboardName);
+            .filter((f) => dashboard &&
+            dashboard[reportId] &&
+            f &&
+            f.dashboardName === dashboard[reportId].dashboardName);
     }, [dashboardFilters, dashboard]);
     const { rows, loading } = useMemoizedRows(reportId);
     const { downloadCSV } = useExport(reportId);
@@ -62,6 +64,9 @@ const ChartUpdater = ({ reportId, containerStyle, className, dashboard, dispatch
     useEffect(() => {
         let isSubscribed = true;
         async function getChartOptions() {
+            if (!didFiltersChange(dashboard[reportId], specificDashboardFilter)) {
+                return;
+            }
             if (isSubscribed) {
                 try {
                     const hostedBody = {
@@ -105,10 +110,6 @@ const ChartUpdater = ({ reportId, containerStyle, className, dashboard, dispatch
             isSubscribed = false;
         };
     }, [specificDashboardFilter, client.customerId, reportId]);
-    return (_jsx(QuillTable, { hideCSVDownloadButton: hideCSVDownloadButton, 
-        // @ts-ignore
-        columns: dashboard[reportId]?.columns || [], 
-        // @ts-ignore
-        rows: rows || dashboard[reportId]?.rows || [], containerStyle: containerStyle, className: className, LoadingComponent: LoadingComponent, isLoading: loading, downloadCSV: downloadCSV }));
+    return (_jsx(QuillTable, { hideCSVDownloadButton: hideCSVDownloadButton, columns: dashboard[reportId]?.columns || [], rows: rows || dashboard[reportId]?.rows || [], containerStyle: containerStyle, className: className, LoadingComponent: LoadingComponent, isLoading: loading, downloadCSV: downloadCSV }));
 };
 export default Table;

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

@@ -8,7 +8,7 @@ import ChartTooltip from '../../components/Chart/ChartTooltip';
 import getDomain from '../../utils/getDomain';
 import { useEffect, useState } from 'react';
 export default function BarChart({ colors, colorMap, yAxisFields, data, containerStyle, className, xAxisField, xAxisFormat, theme, comparison, isStacked, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, onClickChartElement, dateFilter, }) {
-    const [formattedData, setFormattedData] = useState([]);
+    const [formattedData, setFormattedData] = useState(data);
     useEffect(() => {
         if (!data || data.length === 0) {
             return;

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

@@ -9,7 +9,7 @@ import getDomain from '../../utils/getDomain';
 import { useEffect, useState } from 'react';
 import { hashCode } from '../../utils/crypto';
 export default function LineChart({ colors, colorMap = {}, yAxisFields, data, containerStyle, className, xAxisField, xAxisFormat, theme, comparison, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', comparisonLineStyle = 'solid', cartesianGridLineColor, onClickChartElement = () => { }, dateFilter, }) {
-    const [formattedData, setFormattedData] = useState([]);
+    const [formattedData, setFormattedData] = useState(data);
     useEffect(() => {
         if (!data || data.length === 0) {
             return;

package/dist/esm/hooks/useExport.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useExport.d.ts","sourceRoot":"","sources":["../../../src/hooks/useExport.ts"],"names":[],"mappings":"AAkBA,eAAO,MAAM,SAAS,cAAe,MAAM;;;;CAmD1C,CAAC"}
+{"version":3,"file":"useExport.d.ts","sourceRoot":"","sources":["../../../src/hooks/useExport.tsx"],"names":[],"mappings":"AA6EA,eAAO,MAAM,SAAS,cAAe,MAAM;;;;CAuC1C,CAAC"}

package/dist/esm/hooks/useExport.js

@@ -1,9 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { downloadCSV } from '../utils/csv';
-import { useContext, useState } from 'react';
+import { useContext, useLayoutEffect, useRef, useState, } from 'react';
 import { getData } from '../utils/dataFetcher';
 import { ClientContext, DashboardFiltersContext } from '../Context';
+import ReactDOM from 'react-dom';
+import { ChartDisplay } from '../Chart';
+import useTheme from './useTheme';
+import { quillFormat } from '../utils/valueFormatter';
+import { cleanDashboardItem } from '../utils/dashboard';
+import { useReactToPrint } from 'react-to-print';
+async function getExportData(client, dashboardFilters, reportId) {
+    const minimalFilters = Object.values(dashboardFilters).length
+        ? Object.values(dashboardFilters).map((filter) => {
+            const newFilter = { ...filter };
+            if (newFilter.filterType === 'date_range') {
+                delete newFilter['field'];
+                delete newFilter['options'];
+                delete newFilter['selectedValue'];
+            }
+            return newFilter;
+        })
+        : [];
+    const hostedBody = {
+        metadata: {
+            dashboardItemId: reportId,
+            orgId: client.customerId || '*',
+            clientId: client.publicKey,
+            task: 'item',
+            databaseType: client?.databaseType,
+            filters: minimalFilters,
+        },
+    };
+    const cloudBody = {
+        id: reportId,
+    };
+    const resp = await getData(client, 'itempost', 'same-origin', hostedBody, cloudBody);
+    const cleanedReport = await cleanDashboardItem(resp, dashboardFilters);
+    if (cleanedReport.chartType === 'table' && cleanedReport.pivot) {
+        cleanedReport.columns = cleanedReport.yAxisFields;
+    }
+    return cleanedReport;
+}
 export const useExport = (reportId) => {
     const { dashboardFilters } = useContext(DashboardFiltersContext);
+    const theme = useTheme();
     const [client] = useContext(ClientContext);
     const [isLoading, setIsLoading] = useState(false);
     if (!reportId) {
@@ -12,31 +52,7 @@ export const useExport = (reportId) => {
     return {
         downloadCSV: async () => {
             setIsLoading(true);
-            const minimalFilters = Object.values(dashboardFilters).length
-                ? Object.values(dashboardFilters).map((filter) => {
-                    const newFilter = { ...filter };
-                    if (newFilter.filterType === 'date_range') {
-                        delete newFilter['field'];
-                        delete newFilter['options'];
-                        delete newFilter['selectedValue'];
-                    }
-                    return newFilter;
-                })
-                : [];
-            const hostedBody = {
-                metadata: {
-                    dashboardItemId: reportId,
-                    orgId: client.customerId || '*',
-                    clientId: client.publicKey,
-                    task: 'item',
-                    databaseType: client?.databaseType,
-                    filters: minimalFilters,
-                },
-            };
-            const cloudBody = {
-                id: reportId,
-            };
-            const resp = await getData(client, 'itempost', 'same-origin', hostedBody, cloudBody);
+            const resp = await getExportData(client, dashboardFilters, reportId);
             downloadCSV({
                 rows: resp.rows,
                 fields: resp.columns,
@@ -44,7 +60,64 @@ export const useExport = (reportId) => {
             });
             setIsLoading(false);
         },
-        downloadPDF: () => { },
+        downloadPDF: async () => {
+            setIsLoading(true);
+            const resp = await getExportData(client, dashboardFilters, reportId);
+            const iframe = document.createElement('iframe');
+            document.body.appendChild(iframe);
+            if (iframe && iframe.contentDocument) {
+                ReactDOM.render(_jsx(PDFDetail, { report: resp, theme: theme }), iframe.contentDocument.body);
+            }
+            // delete the iframe
+            setTimeout(() => {
+                document.body.removeChild(iframe);
+            }, 1000);
+            setIsLoading(false);
+        },
         isLoading,
     };
 };
+function PDFDetail({ report, theme }) {
+    const componentRef = useRef(null);
+    const handlePrint = useReactToPrint({
+        content: () => componentRef.current,
+        pageStyle: `@page {
+      size: letter;
+      margin: 0;
+    }
+  
+    body {
+      margin: 2rem;
+    }`,
+    });
+    useLayoutEffect(() => {
+        setTimeout(() => handlePrint(), 1500);
+    }, []);
+    return (_jsxs("div", { ref: componentRef, style: { display: 'flex', flexDirection: 'column', margin: '2rem' }, children: [_jsx("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: _jsx("h2", { style: {
+                        fontSize: 18,
+                        fontWeight: '600',
+                        textAlign: 'left',
+                        paddingLeft: 10,
+                        color: theme?.primaryTextColor,
+                    }, children: report.name }) }), _jsxs("div", { style: { paddingLeft: 20, paddingRight: 20 }, children: [report.chartType !== 'table' && (_jsx(ChartDisplay, { overrideTheme: theme, config: report, containerStyle: {
+                            display: 'flex',
+                            height: 400,
+                        }, loading: false, isAnimationActive: false })), _jsx("div", { style: {
+                            border: '1px solid',
+                            borderRadius: '4px',
+                            borderStyle: 'none',
+                        }, children: _jsxs("table", { style: {
+                                fontFamily: 'sans-serif',
+                                width: '100%',
+                                borderCollapse: 'collapse',
+                                borderStyle: 'none',
+                            }, children: [_jsx("thead", { style: {
+                                        textAlign: 'left',
+                                        textOverflow: 'ellipsis',
+                                        whiteSpace: 'nowrap',
+                                        overflow: 'hidden',
+                                    }, children: _jsx("tr", { children: report.columns.map((col, colIndex) => (_jsx("th", { style: { padding: '2px', paddingLeft: '3px' }, children: col.label }, 'head' + colIndex))) }) }), _jsx("tbody", { children: report.rows.map((row, rowIndex) => (_jsx("tr", { children: report.columns.map((col, colIndex) => (_jsx("td", { style: { padding: '2px', paddingLeft: '3px' }, children: quillFormat({
+                                                value: row[col.field],
+                                                format: col.format,
+                                            }) }, 'cell' + col.field + colIndex + rowIndex))) }, 'row' + rowIndex))) })] }) })] })] }));
+}

package/dist/esm/utils/merge.js

@@ -15,14 +15,6 @@ function mergeForwards(resp) {
         }
         j++;
     }
-    while (j < compRows.length) {
-        const obj = {};
-        for (const [key, value] of Object.entries(compRows[j])) {
-            obj[`comparison_${key}`] = value;
-        }
-        resp.rows.push(obj);
-        j++;
-    }
 }
 // eslint-disable-next-line no-unused-vars
 function mergeBackwards(resp) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quillsql/react",
-  "version": "2.12.23",
+  "version": "2.12.25",
   "exports": {
     ".": {
       "import": "./dist/esm/index.js",
@@ -24,6 +24,7 @@
     "@monaco-editor/react": "^4.5.1",
     "date-fns": "^2.29.3",
     "date-fns-tz": "^2.0.0",
+    "react-to-print": "^2.15.1",
     "recharts": "^2.12.5"
   },
   "devDependencies": {