@quillsql/react 2.10.5 → 2.10.6

package/dist/esm/DateRangePicker/dateRangePickerUtils.js

@@ -58,14 +58,14 @@ export const PRIMARY_RANGE = {
  * Maps between the keys of primary range and the short code.
  */
 export const PRIMARY_CODES = {
-    THIS_WEEK: "wk",
-    THIS_MONTH: "m",
-    THIS_YEAR: "y",
-    LAST_7_DAYS: "w",
-    LAST_30_DAYS: "t",
-    LAST_90_DAYS: "90d",
-    LAST_6_MONTHS: "6m",
-    ALL_TIME: "at",
+    THIS_WEEK: 'wk',
+    THIS_MONTH: 'm',
+    THIS_YEAR: 'y',
+    LAST_7_DAYS: 'w',
+    LAST_30_DAYS: 't',
+    LAST_90_DAYS: '90d',
+    LAST_6_MONTHS: '6m',
+    ALL_TIME: 'at',
 };
 /**
  * A helpful map between comparison range keys and a function that takes the

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

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAcxE,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,iBAAiB;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,cAAc;IACtB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;CACtC;AAED,QAAA,MAAM,KAAK,sGAQR,iBAAiB,GAAG,cAAc,4CAqEpC,CAAC;AAEF,UAAU,yBAAyB;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAyBD,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,IAAI,EACJ,MAAM,EACN,cAAc,EACd,OAAO,EACP,gBAAgB,EAChB,KAAK,EACL,qBAA4B,EAC5B,WAAW,EACX,0BAA0B,EAC1B,6BAA6B,EAC7B,YAAoB,EACpB,IAAI,GACL,EAAE;IACD,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0BAA0B,CAAC,EAAE,CAC3B,KAAK,EAAE,yBAAyB,KAC7B,GAAG,CAAC,OAAO,CAAC;IACjB,6BAA6B,CAAC,EAAE,CAC9B,KAAK,EAAE,yBAAyB,KAC7B,GAAG,CAAC,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,kDAomBA;AA2UD,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAcxE,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,iBAAiB;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,cAAc;IACtB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;CACtC;AAED,QAAA,MAAM,KAAK,sGAQR,iBAAiB,GAAG,cAAc,4CAqEpC,CAAC;AAEF,UAAU,yBAAyB;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAkCD,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,IAAI,EACJ,MAAM,EACN,cAAc,EACd,OAAO,EACP,gBAAgB,EAChB,KAAK,EACL,qBAA4B,EAC5B,WAAW,EACX,0BAA0B,EAC1B,6BAA6B,EAC7B,YAAoB,EACpB,IAAI,GACL,EAAE;IACD,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0BAA0B,CAAC,EAAE,CAC3B,KAAK,EAAE,yBAAyB,KAC7B,GAAG,CAAC,OAAO,CAAC;IACjB,6BAA6B,CAAC,EAAE,CAC9B,KAAK,EAAE,yBAAyB,KAC7B,GAAG,CAAC,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,kDAomBA;AA2UD,eAAe,KAAK,CAAC"}

package/dist/esm/Table.js

@@ -47,6 +47,16 @@ const Table = ({ chartId, columns, rows, containerStyle, csvFilename, showDownlo
 const compareValues = (a, b, column) => {
     const valueA = a[column];
     const valueB = b[column];
+    // Null checks
+    if (valueA === null && valueB === null) {
+        return 0; // Both values are null, consider them equal
+    }
+    else if (valueA === null) {
+        return -1; // ValueA is null, consider it smaller
+    }
+    else if (valueB === null) {
+        return 1; // ValueB is null, consider it smaller
+    }
     // For numbers
     if (!isNaN(valueA) && !isNaN(valueB)) {
         return valueA - valueB;
@@ -444,7 +454,7 @@ const ChartUpdater = ({ chartId, containerStyle, dashboard, dispatch, client, da
                         filters: [...Object.values(dashboardFilters)],
                     };
                     const resp = await getData(client, 'itempost', 'omit', hostedBody, cloudBody);
-                    if (resp && resp.name !== "error") {
+                    if (resp && resp.name !== 'error') {
                         if (resp.compareRows) {
                             mergeComparisonRange(resp);
                         }

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export default function BarChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isStacked, isAnimationActive, hideXAxis, hideYAxis, hideCartesionGrid, }: {
+export default function BarChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isStacked, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, }: {
     colors: string[];
     yAxisFields: any[];
     data: any[];
@@ -13,6 +13,6 @@ export default function BarChart({ colors, yAxisFields, data, containerStyle, xA
     isAnimationActive: boolean;
     hideXAxis: boolean;
     hideYAxis: boolean;
-    hideCartesionGrid: boolean;
+    hideCartesianGrid: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=BarChart.d.ts.map

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

@@ -6,7 +6,7 @@ import { axisFormatter } from '../../utils/axisFormatter';
 import { selectColor } from '../../utils/color';
 import ChartTooltip from '../../components/Chart/ChartTooltip';
 import getDomain from '../../utils/getDomain';
-export default function BarChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isStacked, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesionGrid = false, }) {
+export default function BarChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isStacked, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, }) {
     if (!data || data.length === 0) {
         return (_jsx("div", { style: {
                 display: 'flex',
@@ -22,7 +22,7 @@ export default function BarChart({ colors, yAxisFields, data, containerStyle, xA
     return (_jsx("div", { style: {
             ...containerStyle,
             boxSizing: 'content-box',
-        }, children: _jsx(ResponsiveContainer, { width: "100%", height: '100%', children: _jsxs(ReChartsBarChart, { data: data, layout: 'horizontal', children: [!hideCartesionGrid && (_jsx(CartesianGrid, { horizontal: true, vertical: false, stroke: "#e5e7eb" })), _jsx(YAxis, { width: 44, hide: hideYAxis, axisLine: false, tickLine: false, type: "number", domain: getDomain(data, yAxisFields), tick: { transform: 'translate(-3, 0)' }, style: {
+        }, children: _jsx(ResponsiveContainer, { width: "100%", height: '100%', children: _jsxs(ReChartsBarChart, { data: data, layout: 'horizontal', children: [!hideCartesianGrid && (_jsx(CartesianGrid, { horizontal: true, vertical: false, stroke: "#e5e7eb" })), _jsx(YAxis, { width: 44, hide: hideYAxis, axisLine: false, tickLine: false, type: "number", domain: getDomain(data, yAxisFields), tick: { transform: 'translate(-3, 0)' }, style: {
                             fontSize: '12px',
                             fontFamily: theme.chartLabelFontFamily,
                         }, tickFormatter: (tick) => axisFormatter({

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

@@ -1 +1 @@
-{"version":3,"file":"ChartTooltipFrame.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/ChartTooltipFrame.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,GAAG,CAAC;CACZ,2CAiBA"}
+{"version":3,"file":"ChartTooltipFrame.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/ChartTooltipFrame.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,GAAG,CAAC;CACZ,2CAkBA"}

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

@@ -7,6 +7,7 @@ export default function ChartTooltipFrame({ children, theme, }) {
             borderWidth: 1,
             background: theme?.backgroundColor || '#ffffff',
             borderRadius: '6px',
+            zIndex: 40,
             boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
         }, children: children }));
 }

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export default function LineChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isAnimationActive, hideXAxis, hideYAxis, hideCartesionGrid, }: {
+export default function LineChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, }: {
     colors: string[];
     yAxisFields: any[];
     data: any[];
@@ -11,6 +11,6 @@ export default function LineChart({ colors, yAxisFields, data, containerStyle, x
     isAnimationActive: boolean;
     hideXAxis: boolean;
     hideYAxis: boolean;
-    hideCartesionGrid: boolean;
+    hideCartesianGrid: boolean;
 }): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=LineChart.d.ts.map

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

@@ -6,7 +6,7 @@ import { axisFormatter } from '../../utils/axisFormatter';
 import { selectColor } from '../../utils/color';
 import ChartTooltip from '../../components/Chart/ChartTooltip';
 import getDomain from '../../utils/getDomain';
-export default function LineChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesionGrid = false, }) {
+export default function LineChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, }) {
     if (!yAxisFields || !yAxisFields.length) {
         return null;
     }
@@ -22,7 +22,7 @@ export default function LineChart({ colors, yAxisFields, data, containerStyle, x
                 color: theme.secondaryTextColor,
             }, children: "No results found for specified time period." }));
     }
-    return (_jsx("div", { style: { ...containerStyle, boxSizing: 'content-box' }, children: _jsx(ResponsiveContainer, { width: "100%", height: '100%', children: _jsxs(ReChartsAreaChart, { data: data, children: [!hideCartesionGrid && (_jsx(CartesianGrid, { horizontal: true, vertical: false, stroke: "#e5e7eb" })), _jsx(XAxis, { dataKey: xAxisField, hide: hideXAxis, tick: { transform: 'translate(0, 6)' }, style: {
+    return (_jsx("div", { style: { ...containerStyle }, children: _jsx(ResponsiveContainer, { width: "100%", height: '100%', children: _jsxs(ReChartsAreaChart, { data: data, children: [!hideCartesianGrid && (_jsx(CartesianGrid, { horizontal: true, vertical: false, stroke: "#e5e7eb" })), _jsx(XAxis, { dataKey: xAxisField, hide: hideXAxis, tick: { transform: 'translate(0, 6)' }, style: {
                             fontSize: '12px',
                             fontFamily: theme?.chartLabelFontFamily ||
                                 theme?.fontFamily ||

package/dist/esm/components/Dashboard/DashboardGroup.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export default function DashboardGroup({ children }: any): JSX.Element;
+//# sourceMappingURL=DashboardGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DashboardGroup.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CAiBrE"}

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function DashboardGroup({ children }) {
+    return (_jsx("div", { style: {
+            boxSizing: 'content-box',
+            width: `100%`,
+            listStyleType: 'none',
+            marginBottom: 50,
+            display: 'grid',
+            gridGap: 25,
+            gridTemplateColumns: `repeat(auto-fill,minmax(400px, 1fr))`,
+            gridTemplateRows: `repeat(${170}px)`,
+        }, children: children }));
+}

package/dist/esm/components/Dashboard/DashboardItem.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardItem.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DashboardItem.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,aAAa,EACb,oBAA+B,EAC/B,QAAQ,GACT,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CAkGnB"}

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

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { ThemeContext } from '../../Context';
+export default function DashboardItem({ dashboardItem, onClickDashboardItem = () => { }, children, }) {
+    const [theme] = useContext(ThemeContext);
+    return (_jsx("div", { onClick: () => onClickDashboardItem(dashboardItem), style: {
+            height: '100%',
+            cursor: 'pointer',
+            boxSizing: 'content-box',
+            paddingRight: 25,
+            minHeight: 400,
+            borderRadius: 8,
+            paddingTop: 20,
+        }, children: _jsx("div", { style: {
+                width: '100%',
+                height: '100%',
+                boxSizing: 'content-box',
+            }, children: _jsx("div", { style: {
+                    width: '100%',
+                    height: '100%',
+                    boxSizing: 'content-box',
+                }, children: _jsxs("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'space-between',
+                        height: '100%',
+                        boxSizing: 'content-box',
+                    }, children: [_jsxs("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'row',
+                                justifyContent: 'space-between',
+                                boxSizing: 'content-box',
+                            }, children: [_jsx("div", { style: {
+                                        fontFamily: theme.fontFamily,
+                                        color: theme.primaryTextColor,
+                                        boxSizing: 'content-box',
+                                        fontSize: 18,
+                                        fontWeight: '500',
+                                        textOverflow: 'ellipsis',
+                                        // marginLeft: 25,
+                                        padding: 0,
+                                        whiteSpace: 'nowrap',
+                                        display: 'block',
+                                        maxWidth: '100%',
+                                        overflow: 'hidden',
+                                    }, children: dashboardItem?.name }), onClickDashboardItem ? (_jsx("div", { style: {
+                                        fontFamily: theme.fontFamily,
+                                        color: theme.primaryTextColor,
+                                        boxSizing: 'content-box',
+                                        fontWeight: '500',
+                                        fontSize: 14,
+                                        minWidth: 14 * 7,
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'flex-end',
+                                    }, children: 'view report →' })) : null] }), _jsx("div", { style: {
+                                padding: 0,
+                                height: '100%',
+                                boxSizing: 'content-box',
+                            }, children: children })] }) }) }) }, dashboardItem?.name));
+}

package/dist/esm/components/Dashboard/DashboardSection.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export default function DashboardSection({ children }: any): JSX.Element;
+//# sourceMappingURL=DashboardSection.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardSection.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DashboardSection.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAE,QAAQ,EAAE,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CAMvE"}

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function DashboardSection({ children }) {
+    return (_jsx("div", { style: { width: '100%' }, children: children }));
+}

package/dist/esm/index.d.ts

@@ -1,4 +1,4 @@
-export { default as Dashboard } from './Dashboard';
+export { default as Dashboard, type DashboardProps, type DashboardItemProps, type DashboardItemData, type AxisFormat, } from './Dashboard';
 export { default as QuillProvider } from './QuillProvider';
 export { default as Chart } from './Chart';
 export { default as Table } from './Table';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAG,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,KAAK,cAAc,EACnB,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,UAAU,GAChB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 // src/index.ts
-export { default as Dashboard } from './Dashboard';
+export { default as Dashboard, } from './Dashboard';
 export { default as QuillProvider } from './QuillProvider';
 export { default as Chart } from './Chart';
 export { default as Table } from './Table';

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

@@ -56,7 +56,7 @@ export declare function generatePivotTable(pivot: Pivot, data: any, dateRange: a
     rows: any[];
     columns: {
         label: any;
-        field: string | number | boolean;
+        field: string;
     }[];
 };
 //# sourceMappingURL=PivotModal.d.ts.map

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

@@ -474,7 +474,7 @@ function generatePivotTitle(pivot) {
 }
 function getDateRange(dateRange, column, data) {
     if (!dateRange || !dateRange[0]) {
-        if (data.length == 0) {
+        if (data.length == 0 || !data[0][column]) {
             return { start: new Date(), end: new Date() };
         }
         const firstDate = data[0][column] === null ? null : new Date(data[0][column]);

package/dist/esm/utils/dashboard.d.ts

@@ -0,0 +1,12 @@
+import { DashboardItemData } from '../Dashboard';
+/**
+ * Returns a cleaned version of the dashboard item we store in state. We clean
+ * the dashboard item so that we aren't exposing unnecessary details to the
+ * client and also so that we can give the developer using our items a stable
+ * interface to build amazing dashboards on top of.
+ * @param item
+ */
+export declare function cleanDashboardItem(item: {
+    [key: string]: any;
+} | undefined): DashboardItemData | undefined;
+//# sourceMappingURL=dashboard.d.ts.map

package/dist/esm/utils/dashboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard.d.ts","sourceRoot":"","sources":["../../../src/utils/dashboard.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAQjD;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAChC,IAAI,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,GAAG,SAAS,GACvC,iBAAiB,GAAG,SAAS,CA4B/B"}

package/dist/esm/utils/dashboard.js

@@ -0,0 +1,146 @@
+import { useContext } from 'react';
+import { valueFormatter } from './valueFormatter';
+import { generatePivotTable, generatePivotTableYAxis, } from '../internals/ReportBuilder/PivotModal';
+import { DashboardFiltersContext } from '../Context';
+/**
+ * Returns a cleaned version of the dashboard item we store in state. We clean
+ * the dashboard item so that we aren't exposing unnecessary details to the
+ * client and also so that we can give the developer using our items a stable
+ * interface to build amazing dashboards on top of.
+ * @param item
+ */
+export function cleanDashboardItem(item) {
+    if (!item)
+        return undefined;
+    const pivotTable = getPivotTable(item);
+    const { primaryAggregation, comparisonAggregation, aggregationPercentChange, } = getAggragations(pivotTable, item);
+    return {
+        id: item._id,
+        name: item.name,
+        dashboardName: item.dashboardName,
+        rows: item.rows,
+        compareRows: item.compareRows,
+        columns: item.columns,
+        chartType: item.chartType,
+        dateField: item.dateField,
+        pivot: item.pivot,
+        primaryAggregation,
+        comparisonAggregation,
+        aggregationPercentChange,
+        yAxisFields: extractPivotedYAxis(pivotTable, item),
+        xAxisLabel: item.xAxisLabel,
+        xAxisField: item.xAxisField,
+        xAxisFormat: item.xAxisFormat,
+        order: item.order,
+        filtersApplied: item.filtersApplied,
+    };
+}
+/**
+ * Extracts the aggregations from the item, if any.
+ */
+function getAggragations(pivotTable, item) {
+    const yAxisFields = extractPivotedYAxis(pivotTable, item);
+    const rows = extractPivotedData(pivotTable, item);
+    // extract the aggragation for the primary range.
+    const mainKey = yAxisFields[0]?.field ?? item.pivot?.valueField;
+    const primary = mainKey
+        ? rows.reduce((sum, row) => sum + parseFloat(row[mainKey]), 0)
+        : 0;
+    // extract the aggragation for the comparison range, if applicable.
+    const compKey = yAxisFields[1]?.field ?? item.pivot?.valueField;
+    const comparison = compKey
+        ? rows.reduce((sum, row) => sum + parseFloat(row[compKey]), 0)
+        : 0;
+    return {
+        primaryAggregation: formatAggragation(item, primary),
+        comparisonAggregation: formatAggragation(item, comparison),
+        aggregationPercentChange: formatPercentageWithSign(comparison, primary),
+    };
+}
+/**
+ * Applies a valueFormatter to the given value based on the format in the item.
+ */
+function formatAggragation(item, value) {
+    if (!value)
+        return undefined;
+    return valueFormatter({
+        value,
+        field: item.pivot?.valueField,
+        fields: item.yAxisFields,
+    });
+}
+/**
+ * Formats the percentage change from a to b with the sign included.
+ */
+function formatPercentageWithSign(a, b) {
+    const formatter = new Intl.NumberFormat('en-US', {
+        style: 'percent',
+        signDisplay: 'exceptZero',
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+    });
+    return formatter.format(Number(b - a));
+}
+/**
+ * Extract and transform the data from itemInfo.
+ */
+function getPivotTable(itemInfo, config = undefined) {
+    if (!itemInfo)
+        return [];
+    const { dashboardFilters } = useContext(DashboardFiltersContext);
+    const dateFilter = Object.values(dashboardFilters ?? {}).find((filter) => filter.filterType == 'date_range');
+    const pivot = itemInfo?.pivot || config?.pivot;
+    const data = itemInfo ? itemInfo : config;
+    return pivot && data?.rows
+        ? generatePivotTable(pivot, JSON.parse(JSON.stringify(data.rows)), // deep copy
+        dateFilter?.startDate
+            ? [dateFilter?.startDate, dateFilter?.endDate, null]
+            : [null, null, null], Boolean(dateFilter?.comparisonRange?.startDate), -1, dateFilter?.comparisonRange?.startDate
+            ? [
+                dateFilter?.comparisonRange.startDate,
+                dateFilter?.comparisonRange.endDate,
+                null,
+            ]
+            : [null, null, null])
+        : null;
+}
+/**
+ * Returns the data list based on whether the table is pivoted and if there is
+ * a config value passed into this component.
+ */
+function extractPivotedData(pivotTable, item, config = undefined) {
+    if (pivotTable)
+        return pivotTable.rows;
+    if (config) {
+        if (config.bucketedRows.length > 0)
+            return config.bucketedRows;
+        return config.rows;
+    }
+    return item.rows;
+}
+/**
+ * Extracts the yAxis from the pivot table, if one exists.
+ */
+function extractPivotedYAxis(pivotTable, itemInfo, config = undefined) {
+    if (!pivotTable)
+        return [];
+    const pivot = itemInfo?.pivot || config?.pivot;
+    const yAxisFields = config ? config.yAxisFields : itemInfo?.yAxisFields;
+    const pivotTableYAxis = yAxisFields
+        ? generatePivotTableYAxis(pivot, pivotTable.columns, yAxisFields?.[0]?.format)
+        : null;
+    const fields = pivotTableYAxis
+        ? pivotTableYAxis
+        : config
+            ? config.yAxisFields
+            : itemInfo.yAxisFields;
+    if (fields.length == 1) {
+        const sampleField = fields[0];
+        fields[fields.length] = {
+            ...sampleField,
+            field: `comparison_${sampleField.field}`,
+            label: `comparison ${sampleField.label}`,
+        };
+    }
+    return fields;
+}

package/dist/esm/utils/styles.d.ts

@@ -0,0 +1,17 @@
+import { CSSProperties } from 'react';
+export type StyleInput = string | CSSProperties | undefined;
+export type StyleProps = {
+    className: string;
+} | {
+    style: CSSProperties;
+} | {};
+/**
+ * Converts the given styles to a props object that can be passed directly into
+ * a jsx/tsx component. Converts to className if styles is a string, otherwise
+ * treats it as CSSProperties.
+ *
+ * Example:
+ * <div {...styleToProps(containerStyle)}>...</div>
+ */
+export declare function styleToProps(styles: StyleInput): StyleProps;
+//# sourceMappingURL=styles.d.ts.map

package/dist/esm/utils/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,aAAa,GAAG,SAAS,CAAC;AAC5D,MAAM,MAAM,UAAU,GAAG;IAAE,SAAS,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,KAAK,EAAE,aAAa,CAAA;CAAE,GAAG,EAAE,CAAC;AAE/E;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,UAAU,GAAG,UAAU,CAO3D"}

package/dist/esm/utils/styles.js

@@ -0,0 +1,16 @@
+/**
+ * Converts the given styles to a props object that can be passed directly into
+ * a jsx/tsx component. Converts to className if styles is a string, otherwise
+ * treats it as CSSProperties.
+ *
+ * Example:
+ * <div {...styleToProps(containerStyle)}>...</div>
+ */
+export function styleToProps(styles) {
+    if (!styles)
+        return {};
+    if (typeof styles === 'string') {
+        return { className: styles };
+    }
+    return { style: styles };
+}

package/dist/esm/utils/valueFormatter.d.ts

@@ -12,6 +12,6 @@ type Props = {
 /**
  * Pretty-prints the given values to their nice-looking string form.
  */
-export declare const valueFormatter: ({ value, field, fields, }: Props) => string | number | boolean;
+export declare const valueFormatter: ({ value, field, fields, }: Props) => string;
 export {};
 //# sourceMappingURL=valueFormatter.d.ts.map

package/dist/esm/utils/valueFormatter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"valueFormatter.d.ts","sourceRoot":"","sources":["../../../src/utils/valueFormatter.ts"],"names":[],"mappings":"AAGA,KAAK,KAAK,GAAG;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC;IACpD,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IACjC,MAAM,EAAE,KAAK,EAAE,CAAC;CACjB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,8BAIxB,KAAK,KAAG,MAAM,GAAG,MAAM,GAAG,OA+B5B,CAAC"}
+{"version":3,"file":"valueFormatter.d.ts","sourceRoot":"","sources":["../../../src/utils/valueFormatter.ts"],"names":[],"mappings":"AAGA,KAAK,KAAK,GAAG;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC;IACpD,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IACjC,MAAM,EAAE,KAAK,EAAE,CAAC;CACjB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,8BAIxB,KAAK,KAAG,MA+BV,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quillsql/react",
-  "version": "2.10.5",
+  "version": "2.10.6",
   "exports": {
     ".": {
       "import": "./dist/esm/index.js",
@@ -32,11 +32,8 @@
     "@types/react-dom": "^18.2.18",
     "eslint": "^8.56.0",
     "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "typescript": "^5.3.3"
   },
-  "peerDependencies": {
-    "react-dom": ">=17"
-  },
-  "`description": "Quill React components for building dashboards and reporting.",
   "access": "public"
 }