@quillsql/react 2.11.16 → 2.11.17

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

@@ -11,6 +11,8 @@ const date_fns_1 = require("date-fns");
 const valueFormatter_1 = require("../../utils/valueFormatter");
 const ChartBuilder_1 = require("../../ChartBuilder");
 const textProcessing_1 = require("../../utils/textProcessing");
+const util_1 = require("../../components/ReportBuilder/util");
+const ast_1 = require("../../components/ReportBuilder/ast");
 const QuillHover = () => {
     return ((0, jsx_runtime_1.jsx)("style", { children: `
   .quill-hover {
@@ -73,7 +75,7 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
         return (columns || []).reduce((map, col) => {
             // only use columns shown in the report builder's table
             // also filter out id
-            if (col.field !== 'id' && !col.field.endsWith('_id')) {
+            if (col.field !== 'id') {
                 map[col.field] = col.fieldType || col.format;
             }
             return map;
@@ -193,7 +195,7 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
         return pts;
     }, [createdPivots, data]);
     const samplePivotTable = (0, react_1.useMemo)(() => {
-        if (!pivotAggregation || !pivotRowField) {
+        if (!pivotAggregation) {
             return null;
         }
         const pivot = {
@@ -229,10 +231,7 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
                             position: 'absolute',
                             top: -2,
                             right: -2,
-                        } })) }), (0, jsx_runtime_1.jsx)(PopoverComponent, { onClose: () => {
-                        setShowUpdatePivot(false);
-                        setPopUpTitle('Add Pivot');
-                    }, style: rightAlign ? { right: 0 } : {}, parentRef: parentRef, showTrigger: showTrigger, label: triggerButtonText, isOpen: isOpen, setIsOpen: setIsOpen, onClick: () => {
+                        } })) }), showTrigger && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
                         if (columns.length === 0) {
                             setIsOpen(false);
                         }
@@ -243,15 +242,19 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
                         if (!isOpen && recommendedPivots.length === 0) {
                             refreshPivots();
                         }
+                        setIsOpen(!isOpen);
                         setShowUpdatePivot(false);
-                    }, children: (0, jsx_runtime_1.jsx)("div", { children: showUpdatePivot ? ((0, jsx_runtime_1.jsxs)("div", { className: "ref-in-use", ref: editModalRef, style: {
+                    }, label: triggerButtonText })), (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: isOpen, setIsOpen: (isOpen) => {
+                        if (!isOpen) {
+                            setShowUpdatePivot(false);
+                            setPopUpTitle('Add Pivot');
+                        }
+                        setIsOpen(isOpen);
+                    }, popoverChildren: (0, jsx_runtime_1.jsx)("div", { children: showUpdatePivot ? ((0, jsx_runtime_1.jsxs)("div", { className: "ref-in-use", ref: editModalRef, style: {
                                 backgroundColor: 'rgb(255, 255, 255)',
                                 display: 'flex',
                                 flexDirection: 'column',
-                            }, children: [(0, jsx_runtime_1.jsx)(HeaderComponent, { children: popUpTitle }), (0, jsx_runtime_1.jsx)("div", { style: { height: 12 } }), (0, jsx_runtime_1.jsx)("div", { style: { width: divWidth }, children: samplePivotTable && ((0, jsx_runtime_1.jsx)("div", { style: {
-                                            marginBottom: 20,
-                                            minHeight: 160,
-                                        }, children: (0, jsx_runtime_1.jsx)(PivotList_1.PivotCard, { pivotTable: samplePivotTable, theme: theme, index: 0, onSelectPivot: () => { }, selectedPivotIndex: -1, onEditPivot: () => { }, ButtonComponent: ButtonComponent, showEdit: false, clickable: false, minHeight: 140, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent }) })) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                            }, children: [(0, jsx_runtime_1.jsx)(HeaderComponent, { label: popUpTitle }), (0, jsx_runtime_1.jsx)("div", { style: { height: 12 } }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                         display: 'flex',
                                         flexDirection: 'column',
                                         gap: 10,
@@ -262,49 +265,55 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
                                                 flexDirection: 'row',
                                                 gap: 20,
                                                 marginBottom: 5,
-                                            }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(LabelComponent, { children: "Row Field" }), (0, jsx_runtime_1.jsx)(SelectComponent, { id: "pivot-row-field", value: pivotRowField, onChange: (e) => {
-                                                                setPivotRowField(e === '' ? undefined : e);
+                                            }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(LabelComponent, { label: "Row Field" }), (0, jsx_runtime_1.jsx)(SelectComponent, { id: "pivot-row-field", value: pivotRowField, onChange: (e) => {
+                                                                setPivotRowField(e.target.value === ''
+                                                                    ? undefined
+                                                                    : e.target.value);
                                                             }, options: [
                                                                 ...columnSelectOptions.filter((option) => {
                                                                     const format = columns.find((col) => col.field === option.value)?.format;
                                                                     return (format === 'string' ||
-                                                                        ChartBuilder_1.dateFormatOptions.includes(format));
+                                                                        ChartBuilder_1.dateFormatOptions.includes(format) ||
+                                                                        (0, util_1.isIdColumn)(option.value));
                                                                 }),
-                                                            ], theme: theme })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(LabelComponent, { children: "Column Field" }), (0, jsx_runtime_1.jsx)(SelectComponent, { id: "pivot-row-field", value: pivotColumnField, onChange: (e) => {
-                                                                setPivotColumnField(e === '' ? undefined : e);
+                                                            ] })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(LabelComponent, { label: "Column Field" }), (0, jsx_runtime_1.jsx)(SelectComponent, { id: "pivot-row-field", value: pivotColumnField, onChange: (e) => {
+                                                                setPivotColumnField(e.target.value === ''
+                                                                    ? undefined
+                                                                    : e.target.value);
                                                             }, options: [
                                                                 ...columnSelectOptions.filter((option) => {
-                                                                    return (columns.find((col) => col.field === option.value)
-                                                                        ?.format === 'string');
+                                                                    return (columns.find((col) => col.field === option.value)?.format === 'string');
                                                                 }),
-                                                            ], theme: theme })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                                            ] })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                                 display: 'flex',
                                                 flexDirection: 'row',
                                                 gap: 20,
                                                 marginBottom: 20,
-                                            }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(LabelComponent, { children: "Value Field" }), (0, jsx_runtime_1.jsx)(SelectComponent, { id: "pivot-row-field", value: pivotValueField, onChange: (e) => {
-                                                                setPivotValueField(e === '' ? undefined : e);
+                                            }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(LabelComponent, { label: "Value Field" }), (0, jsx_runtime_1.jsx)(SelectComponent, { id: "pivot-row-field", value: pivotValueField, onChange: (e) => {
+                                                                setPivotValueField(e.target.value === ''
+                                                                    ? undefined
+                                                                    : e.target.value);
                                                             }, options: [
                                                                 ...columnSelectOptions.filter((option) => {
-                                                                    return (option.value === '' ||
-                                                                        ChartBuilder_1.numberFormatOptions.includes(columns.find((col) => col.field === option.value)?.format));
+                                                                    return ((option.value === '' ||
+                                                                        ChartBuilder_1.numberFormatOptions.includes(columns.find((col) => col.field === option.value)?.format)) &&
+                                                                        !(0, util_1.isIdColumn)(option.value));
                                                                 }),
-                                                            ], theme: theme })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(LabelComponent, { children: "Aggregation Type" }), (0, jsx_runtime_1.jsx)(SelectComponent, { id: "pivot-row-field", value: pivotAggregation, theme: theme, onChange: (e) => {
-                                                                if (e !== 'count' &&
+                                                            ] })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(LabelComponent, { label: "Aggregation Type" }), (0, jsx_runtime_1.jsx)(SelectComponent, { id: "pivot-row-field", value: pivotAggregation, onChange: (e) => {
+                                                                if (e.target.value !== 'count' &&
                                                                     pivotValueField &&
                                                                     !ChartBuilder_1.numberFormatOptions.includes(columns.find((col) => col.field === pivotValueField)?.format)) {
                                                                     setPivotValueField(null);
                                                                 }
-                                                                setPivotAggregation(e === '' ? undefined : e);
+                                                                setPivotAggregation(e.target.value === ''
+                                                                    ? undefined
+                                                                    : e.target.value);
                                                             }, options: [
                                                                 ...['sum', 'average', 'count', 'max', 'min'].map((option) => {
                                                                     return { label: option, value: option };
                                                                 }),
                                                             ] })] })] })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ButtonComponent, { id: "custom-button", onClick: () => {
                                             const errors = [];
-                                            if (!pivotRowField) {
-                                                errors.push('Row field cannot be empty');
-                                            }
                                             if (!pivotValueField && pivotAggregation !== 'count') {
                                                 errors.push("Value field cannot be empty when aggregation is not 'count'");
                                             }
@@ -547,7 +556,7 @@ const fixBigQueryData = (data = []) => {
 function generatePivotTable(pivot, data, dateRange, isComparison, rowLimit = -1, compRange = null) {
     // If there is no rowField, aggregate on the valueField
     if (!pivot.rowField) {
-        return valueFieldAggregation(data, pivot.valueField, pivot.aggregationType);
+        return valueFieldAggregation(data, pivot.valueField, pivot.aggregationType, isComparison);
     }
     // Handle edge-case for BigQuery objects.
     data = fixBigQueryData(data);
@@ -767,15 +776,6 @@ function generatePivotTable(pivot, data, dateRange, isComparison, rowLimit = -1,
                     }
                     break;
                 case 'average':
-                    value = filteredData.length
-                        ? filteredData.reduce((sum, item) => sum + parseFloat(item[key] ?? 0), 0) / filteredData.length
-                        : 0;
-                    if (isComparison) {
-                        comparisonValue = comparisonFilteredData.length
-                            ? comparisonFilteredData.reduce((sum, item) => sum + parseFloat(item[key] ?? 0), 0) / comparisonFilteredData.length
-                            : 0;
-                    }
-                    break;
                 case 'avg':
                     value = filteredData.length
                         ? filteredData.reduce((sum, item) => sum + parseFloat(item[key] ?? 0), 0) / filteredData.length
@@ -879,12 +879,18 @@ function generatePivotTable(pivot, data, dateRange, isComparison, rowLimit = -1,
                 if (pivot.rowFieldType === 'date') {
                     return new Date(a[pivot.rowField]) - new Date(b[pivot.rowField]);
                 }
+                else if ((0, ast_1.isNumericColumnType)(pivot.rowFieldType)) {
+                    return a[pivot.rowField] - b[pivot.rowField];
+                }
                 return a[pivot.rowField].localeCompare(b[pivot.rowField]);
             }
             else {
                 if (pivot.rowFieldType === 'date') {
                     return new Date(b[pivot.rowField]) - new Date(a[pivot.rowField]);
                 }
+                else if ((0, ast_1.isNumericColumnType)(pivot.rowFieldType)) {
+                    return a[pivot.rowField] - b[pivot.rowField];
+                }
                 return b[pivot.rowField].localeCompare(a[pivot.rowField]);
             }
         });
@@ -892,30 +898,45 @@ function generatePivotTable(pivot, data, dateRange, isComparison, rowLimit = -1,
     return { rows: pivotRows, columns };
 }
 exports.generatePivotTable = generatePivotTable;
-function valueFieldAggregation(data, valueField, aggregationType) {
-    let value;
+function valueFieldAggregation(data, valueField, aggregationType, isComparison) {
+    let value = 0;
+    let comparisonValue = 0;
     switch (aggregationType) {
         case 'sum':
             value = data.reduce((sum, item) => sum + parseFloat(item[valueField] ?? 0), 0);
+            if (isComparison) {
+                comparisonValue = data.reduce((sum, item) => sum + parseFloat(item[`comparison_${valueField}`] ?? 0), 0);
+            }
             break;
         case 'count':
-            value = data.length;
+            value = data.reduce((count, item) => count + (item[valueField] ? 1 : 0), 0);
+            if (isComparison) {
+                comparisonValue = data.reduce((count, item) => count + (item[`comparison_${valueField}`] ? 1 : 0), 0);
+            }
             break;
         case 'avg':
-            value = data.length
-                ? data.reduce((sum, item) => sum + parseFloat(item[valueField] ?? 0), 0) / data.length
-                : 0;
-            break;
         case 'average':
-            value = data.length
-                ? data.reduce((sum, item) => sum + parseFloat(item[valueField] ?? 0), 0) / data.length
-                : 0;
+            const count = data.reduce((count, item) => count + (item[valueField] ? 1 : 0), 0);
+            value =
+                data.reduce((sum, item) => sum + parseFloat(item[valueField] ?? 0), 0) /
+                    (count === 0 ? 1 : count);
+            if (isComparison) {
+                const comparisonCount = data.reduce((count, item) => count + (item[`comparison_${valueField}`] ? 1 : 0), 0);
+                comparisonValue =
+                    data.reduce((sum, item) => sum + parseFloat(item[`comparison_${valueField}`] ?? 0), 0) / (comparisonCount === 0 ? 1 : comparisonCount);
+            }
             break;
         case 'max':
             value = data.reduce((max, item) => Math.max(max, parseFloat(item[valueField] ?? 0)), -Infinity);
+            if (isComparison) {
+                comparisonValue = data.reduce((max, item) => Math.max(max, parseFloat(item[`comparison_${valueField}`] ?? 0)), -Infinity);
+            }
             break;
         case 'min':
             value = data.reduce((min, item) => Math.min(min, parseFloat(item[valueField] ?? 0)), Infinity);
+            if (isComparison) {
+                comparisonValue = data.reduce((min, item) => Math.min(min, parseFloat(item[`comparison_${valueField}`] ?? 0)), Infinity);
+            }
             break;
         // Implement other aggregation types as needed
         default:
@@ -923,6 +944,9 @@ function valueFieldAggregation(data, valueField, aggregationType) {
     }
     const row = {};
     row[valueField] = value;
+    if (isComparison) {
+        row[`comparison_${valueField}`] = comparisonValue;
+    }
     return {
         rows: [row],
         columns: [{ label: (0, textProcessing_1.snakeCaseToTitleCase)(valueField), field: valueField }],

package/dist/cjs/utils/dataFetcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dataFetcher.d.ts","sourceRoot":"","sources":["../../../src/utils/dataFetcher.tsx"],"names":[],"mappings":"AAEA,wBAAsB,OAAO,CAC3B,MAAM,EAAE,GAAG,EACX,kBAAkB,EAAE,MAAM,EAC1B,MAAM,EAAE,kBAAkB,EAC1B,iBAAiB,EAAE,GAAG,EACtB,gBAAgB,EAAE,GAAG,EACrB,MAAM,SAAS,gBA8DhB;AAED,wBAAsB,gBAAgB,CACpC,MAAM,EAAE,GAAG,EACX,kBAAkB,EAAE,MAAM,EAC1B,gBAAgB,EAAE,GAAG,EACrB,MAAM,SAAS,gBA+BhB"}
+{"version":3,"file":"dataFetcher.d.ts","sourceRoot":"","sources":["../../../src/utils/dataFetcher.tsx"],"names":[],"mappings":"AAEA,wBAAsB,OAAO,CAC3B,MAAM,EAAE,GAAG,EACX,kBAAkB,EAAE,MAAM,EAC1B,MAAM,EAAE,kBAAkB,EAC1B,iBAAiB,EAAE,GAAG,EACtB,gBAAgB,EAAE,GAAG,EACrB,MAAM,SAAS,gBAgEhB;AAED,wBAAsB,gBAAgB,CACpC,MAAM,EAAE,GAAG,EACX,kBAAkB,EAAE,MAAM,EAC1B,gBAAgB,EAAE,GAAG,EACrB,MAAM,SAAS,gBA+BhB"}

package/dist/cjs/utils/dataFetcher.js

@@ -23,6 +23,7 @@ async function getData(client, cloudQueryEndpoint, noCred, hostedRequestBody, cl
             let result;
             if (responseJson.data?.data) {
                 result = {
+                    fields: responseJson?.data.queries?.queryResults[0]?.fields,
                     ...responseJson.data.data,
                     rows: responseJson?.data.queries?.queryResults[0]?.rows,
                     compareRows: responseJson?.data.queries?.queryResults[1]?.rows,
@@ -30,6 +31,7 @@ async function getData(client, cloudQueryEndpoint, noCred, hostedRequestBody, cl
             }
             else {
                 result = {
+                    fields: responseJson?.queries?.queryResults[0]?.fields,
                     ...responseJson.data,
                     rows: responseJson?.queries?.queryResults[0]?.rows,
                     compareRows: responseJson?.queries?.queryResults[1]?.rows,

package/dist/esm/Chart.d.ts

@@ -1,46 +1,6 @@
 /// <reference types="react" />
 import { QuillTheme } from './QuillProvider';
-interface BaseChartProps {
-    colors?: string[];
-    containerStyle?: React.CSSProperties;
-    dateFilter?: any;
-    theme?: any;
-    isDateFilter?: boolean;
-    isAnimationActive?: boolean;
-    hideXAxis?: boolean;
-    hideYAxis?: boolean;
-    hideCartesianGrid?: boolean;
-    dashedComparison?: boolean;
-    dateRangeFilterDisabled?: boolean;
-    singlePointStyle?: 'dot' | 'line';
-    mapColorsToFields?: (_dashboardItem: DashboardItem, _theme: QuillTheme) => ColorMapType;
-}
-interface WithChartId extends BaseChartProps {
-    chartId: string;
-}
-export type FieldFormat = 'whole_number' | 'one_decimal_place' | 'two_decimal_places' | 'dollar_amount' | 'dollar_cents' | 'MMM_yyyy' | 'MMM_dd_yyyy' | 'MMM_dd-MMM_dd' | 'MMM_dd_hh:mm_ap_pm' | 'hh_ap_pm' | 'percent' | 'string';
-interface YAxisField {
-    label: string;
-    field: string;
-    chartType: string;
-    format: FieldFormat;
-}
-export interface DashboardItem {
-    id: string;
-    name: string;
-    chartType: string;
-    xAxisField: string;
-    xAxisLabel: string;
-    xAxisFormat: FieldFormat;
-    yAxisFields: YAxisField[];
-    rows: any[];
-    columns: any[];
-    pivot: any;
-}
-interface WithConfig extends BaseChartProps {
-    config: DashboardItem | any;
-}
-type ChartProps = WithChartId | WithConfig;
+import { type DashboardItem } from './Dashboard';
 export declare function didFiltersChange(dashboardItem: any, filters: any): boolean;
 export type ColorMapType = {
     [key: string]: {
@@ -52,6 +12,121 @@ export type ColorMapType = {
         comparisonGradientStop?: string;
     };
 };
-declare const Chart: (data: ChartProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Props for the Quill Chart component.
+ */
+export interface ChartProps {
+    /**
+     * A dashboard item to render, if any.
+     *
+     * When config is passed, the chart will not refetch the given dashboard item
+     * and will instead simply render the item it was given.
+     *
+     * A `config` must be passed if `chartId` is not present.
+     */
+    config?: DashboardItem | any;
+    /**
+     * A dashboard item to render, if any.
+     *
+     * When a chartId is passed, the chart will first fetch the data necessary to
+     * render this chart, and then it will render the dashboard item that it
+     * receives from the server.
+     *
+     * A `chartId` must be passed if `config` is not present.
+     */
+    chartId?: string;
+    /**
+     * A list of color strings used to color the chart.
+     *
+     * For example, a pie chart would use the colors for each section and a bar
+     * chart would use the colors for each bar.
+     */
+    colors?: string[];
+    /**
+     * Applies the given date filter to this chart, if any.
+     */
+    dateFilter?: any;
+    /**
+     * Whether this chart has a date filter.
+     */
+    isDateFilter?: boolean;
+    /**
+     * Whether to show animations on render complete.
+     */
+    isAnimationActive?: boolean;
+    /**
+     * Whether to hide the x axis.
+     */
+    hideXAxis?: boolean;
+    /**
+     * Whether to hide the y axis.
+     */
+    hideYAxis?: boolean;
+    /**
+     * Whether to hide the cartesian grid lines.
+     */
+    hideCartesianGrid?: boolean;
+    /**
+     * Whether the date range filter has been disabled.
+     */
+    hideDateRangeFilter?: boolean;
+    /**
+     * Whether the comparison range shows as dashed for date comparison line
+     * charts (as opposed to the default solid line).
+     */
+    comparisonLineStyle?: 'solid' | 'dashed';
+    /**
+     * An optional function that takes a dashboard item and theme and returns a
+     * map of keys used in that dashboard item to the colors they should use.
+     *
+     * The color values support RGB hexcodes and CSS color literals.
+     *
+     * @example
+     * ```js
+     * let mapColorsToFields = (item, theme) => {
+     *   return {
+     *     // all the queries with yAxis of 'amount' get colored this way:
+     *     amount: {
+     *       primary: 'red',
+     *       comparison: 'gray',
+     *       primaryGradientStart: 'red',
+     *       primaryGradientStop: 'lightred',
+     *       comparisonGradientStart: '#EFEFEF',
+     *       comparisonGradientStop: '#EFEFEF00',
+     *     },
+     *     total: {
+     *       primary: 'red'
+     *     },
+     *   };
+     * }
+     * ```
+     */
+    mapColorsToFields?: (dashboardItem: DashboardItem, theme: QuillTheme) => ColorMapType;
+    /**
+     * Styles the top-level container of the Chart.
+     */
+    containerStyle?: React.CSSProperties;
+}
+/**
+ * ### Quill Chart
+ *
+ * A simple component that displays the given data in one of many chart types.
+ *
+ * @example
+ * ```js
+ * // Usage with chart id (will auto-fetch data)
+ * <Chart chartId="12345" />
+ * ```
+ *
+ * @example
+ * ```js
+ * // Usage with a dashboard item (will not auto-fetch data)
+ * <Chart config={dashboardItem} />
+ * ```
+ *
+ * ### Chart API
+ * @see https://docs.quillsql.com/components/chart
+ */
+declare const Chart: (props: ChartProps) => 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":";AAYA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAgB7C,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;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,gBAAgB,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAClC,iBAAiB,CAAC,EAAE,CAClB,cAAc,EAAE,aAAa,EAC7B,MAAM,EAAE,UAAU,KACf,YAAY,CAAC;CACnB;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,EAAE,EAAE,MAAM,CAAC;IACX,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;AA+D3C,wBAAgB,gBAAgB,CAAC,aAAa,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,WAQhE;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;AAaF,QAAA,MAAM,KAAK,SAAU,UAAU,4CAqC9B,CAAC;AAkiBF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAgB7C,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAiGjD,wBAAgB,gBAAgB,CAAC,aAAa,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,WAQhE;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,aAAa,GAAG,GAAG,CAAC;IAE7B;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAElB;;OAEG;IACH,UAAU,CAAC,EAAE,GAAG,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;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,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAEzC;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,iBAAiB,CAAC,EAAE,CAClB,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,UAAU,KACd,YAAY,CAAC;IAElB;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,KAAK,UAAW,UAAU,4CAqC/B,CAAC;AA+hBF,eAAe,KAAK,CAAC"}

package/dist/esm/Chart.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable no-unused-vars */
 import { useState, useEffect, useContext, useMemo } from 'react';
 import { differenceInHours } from 'date-fns';
-import BarList from './BarList';
-import PieChart from './PieChart';
-import { ClientContext, DashboardContext, ThemeContext, DashboardFiltersContext, } from './Context';
+import BarList from './components/Chart/BarList';
+import PieChart from './components/Chart/PieChart';
+import { ClientContext, DashboardContext, DashboardFiltersContext, } from './Context';
 import QuillTable from './components/QuillTable';
 import { getData } from './utils/dataFetcher';
 import { generatePivotTable, generatePivotTableYAxis, } from './internals/ReportBuilder/PivotModal';
@@ -16,6 +17,7 @@ import ChartError from './components/Chart/ChartError';
 import { COMPARISON_OPTIONS } from './DateRangePicker/dateRangePickerUtils';
 import { quillFormat } from './utils/valueFormatter';
 import { downloadCSV } from './utils/csv';
+import useTheme from './hooks/useTheme';
 // @ts-ignore
 function sumByKey(arr, key) {
     // @ts-ignore
@@ -76,11 +78,33 @@ function fallbackMapColorsToFields(_dashboardItem, _theme) {
     // By default, if the key is not in the map we use the colors array.
     return {};
 }
-const Chart = (data) => {
+/**
+ * ### Quill Chart
+ *
+ * A simple component that displays the given data in one of many chart types.
+ *
+ * @example
+ * ```js
+ * // Usage with chart id (will auto-fetch data)
+ * <Chart chartId="12345" />
+ * ```
+ *
+ * @example
+ * ```js
+ * // Usage with a dashboard item (will not auto-fetch data)
+ * <Chart config={dashboardItem} />
+ * ```
+ *
+ * ### Chart API
+ * @see https://docs.quillsql.com/components/chart
+ */
+const Chart = (props) => {
+    // Cast the props to the internal version so we can use the inherited types.
+    let data = props;
     if ('config' in data) {
         return (_jsx(ChartDisplay, { ...data, error: data.config.rows ? undefined : 'No rows found', loading: Boolean(!data.config), isComparison: Boolean(data?.config?.compareRows?.length) }));
     }
-    const [theme] = useContext(ThemeContext);
+    const theme = useTheme();
     const chartColors = useMemo(() => {
         return data.colors?.length
             ? data.colors
@@ -88,9 +112,9 @@ const Chart = (data) => {
                 ? theme.chartColors
                 : ['#4E80EE', '#E14F62', '#55B5A6', '#E9A23B', '#6466E9', '#55B685'];
     }, [data.colors]);
-    return (_jsx(ChartUpdater, { chartId: data.chartId, containerStyle: data.containerStyle, colors: chartColors, theme: theme, isAnimationActive: data.isAnimationActive, hideXAxis: data.hideXAxis, hideYAxis: data.hideYAxis, hideCartesianGrid: data.hideCartesianGrid, dashedComparison: data.dashedComparison, dateRangeFilterDisabled: data.dateRangeFilterDisabled, singlePointStyle: data.singlePointStyle ?? 'dot', mapColorsToFields: data.mapColorsToFields ?? fallbackMapColorsToFields }));
+    return (_jsx(ChartUpdater, { chartId: data.chartId, containerStyle: data.containerStyle, colors: chartColors, isAnimationActive: data.isAnimationActive, hideXAxis: data.hideXAxis, hideYAxis: data.hideYAxis, hideCartesianGrid: data.hideCartesianGrid, hideDateRangeFilter: data.hideDateRangeFilter, comparisonLineStyle: data.comparisonLineStyle, mapColorsToFields: data.mapColorsToFields ?? fallbackMapColorsToFields }));
 };
-const ChartUpdater = ({ colors, chartId, containerStyle, theme, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, dashedComparison, dateRangeFilterDisabled, singlePointStyle, mapColorsToFields, }) => {
+const ChartUpdater = ({ colors, chartId, containerStyle, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, comparisonLineStyle, hideDateRangeFilter, mapColorsToFields, }) => {
     const { dispatch, dashboard } = useContext(DashboardContext);
     const { dashboardFilters } = useContext(DashboardFiltersContext);
     const [initialLoad, setInitialLoad] = useState(true);
@@ -99,6 +123,7 @@ const ChartUpdater = ({ colors, chartId, containerStyle, theme, isAnimationActiv
     const [isComparison, setIsComparison] = useState(false);
     const [colorMap, setColorMap] = useState({});
     const [client, _] = useContext(ClientContext);
+    const theme = useTheme();
     useEffect(() => {
         async function getChartOptions() {
             setLoading(true);
@@ -108,7 +133,7 @@ const ChartUpdater = ({ colors, chartId, containerStyle, theme, isAnimationActiv
             }
             try {
                 // Remove extra fields on each filter so we don't confuse the backend.
-                const allowDateRange = !dateRangeFilterDisabled;
+                const allowDateRange = !hideDateRangeFilter;
                 const minimalFilters = Object.values(dashboardFilters).length
                     ? Object.values(dashboardFilters)
                         .filter((f) => allowDateRange || f.filterType !== 'date_range')
@@ -166,11 +191,11 @@ const ChartUpdater = ({ colors, chartId, containerStyle, theme, isAnimationActiv
         setInitialLoad(false);
         getChartOptions();
     }, [dashboardFilters, client, chartId]);
-    return (_jsx(ChartDisplay, { config: dashboard[chartId], colors: colors, containerStyle: containerStyle, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, dashedComparison: dashedComparison, singlePointStyle: singlePointStyle, isAnimationActive: isAnimationActive, isComparison: isComparison, loading: loading || initialLoad, error: error, colorMap: colorMap }));
+    return (_jsx(ChartDisplay, { config: dashboard[chartId], colors: colors, containerStyle: containerStyle, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, comparisonLineStyle: comparisonLineStyle, isAnimationActive: isAnimationActive, isComparison: isComparison, loading: loading || initialLoad, error: error, colorMap: colorMap }));
 };
-const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, dashedComparison, isAnimationActive, loading = false, error = undefined, isComparison = false, singlePointStyle = 'dot', colorMap, }) => {
+const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, comparisonLineStyle, isAnimationActive, loading = false, error = undefined, isComparison = false, colorMap, }) => {
     const { dashboardFilters } = useContext(DashboardFiltersContext);
-    const [theme] = useContext(ThemeContext);
+    const theme = useTheme();
     const chartColors = useMemo(() => {
         return colors?.length
             ? colors
@@ -298,13 +323,14 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
         return (_jsx(BarChart, { colors: chartColors, theme: theme, isStacked: isPivot && yAxisFields.length > (dateFilter?.comparison ? 2 : 1), yAxisFields: yAxisFields, data: barChartData, xAxisField: config.xAxisField, xAxisLabel: config.xAxisLabel, xAxisFormat: config.xAxisFormat, containerStyle: containerStyle, comparison: dateFilter?.comparison, isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, colorMap: colorMap }));
     }
     if (chartTypes.includes('metric')) {
-        const data = config; // THIS SHOULD ACCOUNT FOR PIVOT TABLES IN THE FUTURE
-        const isComparison = data.rows?.length > 0 &&
-            Object.keys(data.rows[0]).includes(`comparison_${data.xAxisField}`);
+        const data = config;
+        const rows = pivotTable?.rows ?? data.rows ?? [];
+        const isComparison = rows?.length > 0 &&
+            Object.keys(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;
-        if (data.rows?.length === 0 || data.rows[0][data.xAxisField] === null) {
+        if (rows?.length === 0 || rows[0][data.xAxisField] === null) {
             return (_jsx("div", { style: {
                     display: 'flex',
                     flex: '1 0 auto',
@@ -342,7 +368,7 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
                         marginRight: 'auto',
                     }, children: [_jsx("span", { children: data.rows?.length > 0 &&
                                 valueFormatter({
-                                    value: data.rows[0][data.xAxisField] ?? 0,
+                                    value: rows[0][data.xAxisField] ?? 0,
                                     field: data.xAxisField,
                                     fields: [
                                         {
@@ -371,9 +397,9 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
                                 fontWeight: '500',
                                 fontFamily: theme?.fontFamily,
                                 color: theme?.secondaryTextColor,
-                            }, children: data.rows?.length > 0 &&
+                            }, children: rows?.length > 0 &&
                                 valueFormatter({
-                                    value: data.rows[0][`comparison_${data.xAxisField}`] ?? 0,
+                                    value: rows[0][`comparison_${data.xAxisField}`] ?? 0,
                                     field: data.xAxisField,
                                     fields: [
                                         {
@@ -407,6 +433,6 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
             { [xAxis]: endDate, [yAxis]: '0' },
         ];
     }
-    return (_jsx(LineChart, { colors: chartColors, colorMap: colorMap, yAxisFields: yAxisFields, data: lineChartData, xAxisField: config.xAxisField, xAxisLabel: config.xAxisLabel, xAxisFormat: config.xAxisFormat, containerStyle: containerStyle, theme: theme, comparison: dateFilter?.comparison, isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, dashedComparison: dashedComparison, singlePointStyle: singlePointStyle }));
+    return (_jsx(LineChart, { colors: chartColors, colorMap: colorMap, yAxisFields: yAxisFields, data: lineChartData, xAxisField: config.xAxisField, xAxisLabel: config.xAxisLabel, xAxisFormat: config.xAxisFormat, containerStyle: containerStyle, theme: theme, comparison: dateFilter?.comparison, isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, comparisonLineStyle: comparisonLineStyle ?? 'solid' }));
 };
 export default Chart;