@quillsql/react 2.11.23 → 2.11.25

package/dist/cjs/utils/axisFormatter.js

@@ -20,10 +20,10 @@ const axisFormatter = ({ value, field, fields, }) => {
     const HANDLERS = {
         percent: formatPercent,
         dollar_amount: formatDollarAmount,
-        dollar_cents: formatDollarCents,
+        dollar_cents: formatDollarAmount, // no cents for axis format
         whole_number: formatWholeNumber,
-        one_decimal_place: formatOneDecimalPlace,
-        two_decimal_places: formatTwoDecimalPlaces,
+        one_decimal_place: formatWholeNumber, // no decimals for axis format
+        two_decimal_places: formatWholeNumber, // no decimals for axis format
         string: formatString,
         yyyy: format_YYYY,
         MMM_yyyy: format_MMM_yyyy,

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

@@ -1 +1 @@
-{"version":3,"file":"getDomain.d.ts","sourceRoot":"","sources":["../../../src/utils/getDomain.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,MAAM,EAAE,CA8BtE"}
+{"version":3,"file":"getDomain.d.ts","sourceRoot":"","sources":["../../../src/utils/getDomain.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,MAAM,EAAE,CAkCtE"}

package/dist/cjs/utils/getDomain.js

@@ -26,6 +26,9 @@ function getDomain(data, fields) {
     if (minValue === 0 && maxValue === 0) {
         return [0, 1];
     }
+    if (minValue === Infinity && maxValue === -Infinity) {
+        return [0, 1];
+    }
     return fuzzyRound(Math.min(minValue, 0), maxValue);
 }
 exports.default = getDomain;

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

@@ -1 +1 @@
-{"version":3,"file":"merge.d.ts","sourceRoot":"","sources":["../../../src/utils/merge.ts"],"names":[],"mappings":"AAAA,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,QAG7C"}
+{"version":3,"file":"merge.d.ts","sourceRoot":"","sources":["../../../src/utils/merge.ts"],"names":[],"mappings":"AAAA,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,QAI7C"}

package/dist/cjs/utils/merge.js

@@ -2,6 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.mergeComparisonRange = void 0;
 function mergeComparisonRange(resp) {
+    if (resp.chartType === "table")
+        return;
     mergeForwards(resp);
     // mergeBackwards(resp); // uncomment to switch back and forth
 }

package/dist/cjs/utils/pivotProcessing.d.ts

@@ -0,0 +1,20 @@
+import { Pivot } from '../internals/ReportBuilder/PivotModal';
+export declare function pivotToSql(pivot: Pivot, query: string, client: any): {
+    query: string;
+    preQueries?: string[];
+    runQueryConfig?: any;
+} | undefined;
+export declare function isValidPivot(pivot: Pivot): boolean;
+export declare function getPossiblePivotFieldOptions(columns: any, uniqueValues: {
+    [field: string]: any;
+}): {
+    rowFields: string[];
+    columnFields: string[];
+    valueFields: string[];
+};
+export declare function cleanPivot(pivot: Pivot, possibleColumns: {
+    rowFields: any;
+    columnFields: any;
+    valueFields: any;
+}): Pivot;
+//# sourceMappingURL=pivotProcessing.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pivotProcessing.d.ts","sourceRoot":"","sources":["../../../src/utils/pivotProcessing.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,MAAM,uCAAuC,CAAC;AAG9D,wBAAgB,UAAU,CACxB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,GAAG,GACV;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IAAC,cAAc,CAAC,EAAE,GAAG,CAAA;CAAE,GAAG,SAAS,CAgD5E;AAmDD,wBAAgB,YAAY,CAAC,KAAK,EAAE,KAAK,WAgBxC;AAED,wBAAgB,4BAA4B,CAC1C,OAAO,EAAE,GAAG,EACZ,YAAY,EAAE;IAAE,CAAC,KAAK,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE;;;;EA8CvC;AAED,wBAAgB,UAAU,CACxB,KAAK,EAAE,KAAK,EACZ,eAAe,EAAE;IACf,SAAS,EAAE,GAAG,CAAC;IACf,YAAY,EAAE,GAAG,CAAC;IAClB,WAAW,EAAE,GAAG,CAAC;CAClB,GACA,KAAK,CAqCP"}

package/dist/cjs/utils/pivotProcessing.js

@@ -0,0 +1,177 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cleanPivot = exports.getPossiblePivotFieldOptions = exports.isValidPivot = exports.pivotToSql = void 0;
+const ChartBuilder_1 = require("../ChartBuilder");
+const ast_1 = require("../components/ReportBuilder/ast");
+const util_1 = require("../components/ReportBuilder/util");
+function pivotToSql(pivot, query, client) {
+    const processedAggType = pivot.aggregationType?.toLowerCase() === 'average'
+        ? 'avg'
+        : pivot.aggregationType?.toLowerCase();
+    if ((!pivot.rowField && pivot.valueField && processedAggType) ||
+        (!pivot.valueField && pivot.rowField && processedAggType === 'count')) {
+        // table aggregation
+        return {
+            query: `with
+    prePivotQuery as (${query}) 
+    SELECT ${processedAggType}(${pivot.valueField ?? pivot.rowField}) FROM prePivotQuery`,
+        };
+    }
+    else if (!pivot.columnField &&
+        processedAggType &&
+        pivot.rowField &&
+        pivot.valueField) {
+        // 1-d pivot
+        return {
+            query: `with
+    prePivotQuery as (${query}) 
+    SELECT ${pivot.rowField}, ${processedAggType}(${pivot.valueField}) FROM prePivotQuery GROUP BY ${pivot.rowField}`,
+        };
+    }
+    else if (pivot.columnField &&
+        pivot.rowField &&
+        pivot.valueField &&
+        processedAggType) {
+        // 2-d pivot
+        const sqlQuery = createPivotSqlQuery(pivot.rowField, pivot.columnField, pivot.valueField, processedAggType, query);
+        return {
+            preQueries: [sqlQuery],
+            query: '',
+            runQueryConfig: { getPivotQuery: true },
+        };
+    }
+    return undefined;
+}
+exports.pivotToSql = pivotToSql;
+function createPivotSqlQuery(rowField, columnField, valueField, aggregationType, query) {
+    // const sqlAggregationType = convertToSqlAggregationType(aggregationType);
+    return `with querytable as (${query}),
+  DistinctProducts as (
+    select distinct
+      ${columnField}
+    from
+      querytable
+  ),
+  DynamicSQL as (
+    select
+      string_agg(
+        concat(
+          '${aggregationType}(CASE WHEN ${columnField} = ''',
+          replace(${columnField}, '''', ''''''),
+          ''' THEN ${valueField} ELSE 0 END) AS ',
+          concat(concat('"', replace(${columnField}, ' ', '_')), '"')
+        ),
+        ',
+    '
+      ) as sql_part
+    from
+      DistinctProducts
+  ),
+  FinalQuery as (
+    select
+      concat(
+        'WITH querytable as (${query}) SELECT ${rowField}, ',
+        sql_part,
+        ' 
+    FROM querytable 
+    GROUP BY ${rowField} 
+    ORDER BY ${rowField}'
+      ) as query
+    from
+      DynamicSQL
+  )
+select
+  query
+from
+  FinalQuery;`;
+}
+function isValidPivot(pivot) {
+    if (pivot.rowField && pivot.aggregationType === 'count') {
+        return true;
+    }
+    else if (pivot.rowField && pivot.valueField && pivot.aggregationType) {
+        return true;
+    }
+    else if (pivot.valueField && pivot.aggregationType) {
+        return true;
+    }
+    else if (pivot.rowField &&
+        pivot.columnField &&
+        pivot.valueField &&
+        pivot.aggregationType) {
+        return true;
+    }
+    return false;
+}
+exports.isValidPivot = isValidPivot;
+function getPossiblePivotFieldOptions(columns, uniqueValues) {
+    let rowFields = [];
+    let columnFields = [];
+    let valueFields = [];
+    for (let column of columns) {
+        // row fields can be dates or strings
+        if (column.format === 'date' ||
+            column.fieldType === 'date' ||
+            ChartBuilder_1.dateFormatOptions.includes(column.format)) {
+            rowFields.push(column.field);
+        }
+        // column fields can be strings
+        if (column.format === 'string') {
+            const possibleValues = uniqueValues ? uniqueValues[column.field] : 0;
+            const isNullValuesOnly = !possibleValues ||
+                (Object.keys(possibleValues).length === 1 &&
+                    Object.keys(possibleValues)[0] === 'null');
+            if (!isNullValuesOnly && Object.keys(possibleValues).length <= 36) {
+                columnFields.push(column.field);
+            }
+            if (!isNullValuesOnly && Object.keys(possibleValues).length <= 36) {
+                rowFields.push(column.field);
+            }
+        }
+        // value fields can be numbers
+        if (column.format === 'whole_number' ||
+            ChartBuilder_1.numberFormatOptions.includes(column.format) ||
+            (0, ast_1.isNumericColumnType)(column.fieldType)) {
+            if (!(0, util_1.isIdColumn)(column.field)) {
+                valueFields.push(column.field);
+            }
+        }
+    }
+    return {
+        rowFields,
+        columnFields,
+        valueFields,
+    };
+}
+exports.getPossiblePivotFieldOptions = getPossiblePivotFieldOptions;
+function cleanPivot(pivot, possibleColumns) {
+    if (possibleColumns.columnFields.length === 0 &&
+        possibleColumns.rowFields.length === 0 &&
+        possibleColumns.valueFields.length === 0) {
+        return pivot;
+    }
+    // Swap row field and column field if the AI put a date field as the column field
+    if (pivot.columnField &&
+        !possibleColumns.columnFields.includes(pivot.columnField)) {
+        if (possibleColumns.rowFields.includes(pivot.columnField)) {
+            const rowField = pivot.rowField;
+            pivot.rowField = pivot.columnField;
+            pivot.columnField = possibleColumns.columnFields.includes(rowField)
+                ? rowField
+                : undefined;
+        }
+    }
+    if (pivot.rowField && !possibleColumns.rowFields.includes(pivot.rowField)) {
+        pivot.rowField = '';
+    }
+    if (pivot.valueField &&
+        !possibleColumns.valueFields.includes(pivot.valueField)) {
+        pivot.valueField = '';
+    }
+    if (pivot.columnField &&
+        !possibleColumns.columnFields.includes(pivot.columnField)) {
+        pivot.columnField = undefined;
+    }
+    return pivot;
+}
+exports.cleanPivot = cleanPivot;

package/dist/cjs/utils/queryConstructor.d.ts

@@ -0,0 +1,2 @@
+export declare function generateDistinctQuery(stringFields: string[], query: string): string;
+//# sourceMappingURL=queryConstructor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"queryConstructor.d.ts","sourceRoot":"","sources":["../../../src/utils/queryConstructor.ts"],"names":[],"mappings":"AAAA,wBAAgB,qBAAqB,CAAC,YAAY,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,UAQ1E"}

package/dist/cjs/utils/queryConstructor.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateDistinctQuery = void 0;
+function generateDistinctQuery(stringFields, query) {
+    const distinctQueries = stringFields.map((field) => {
+        return `SELECT '${field}' AS field, ARRAY_AGG(DISTINCT ${field}) AS string_values FROM querytable`;
+    });
+    const distinctQuery = distinctQueries.join(' UNION ALL ');
+    return `WITH querytable AS (${query.replace(';', '')}) ` + distinctQuery;
+}
+exports.generateDistinctQuery = generateDistinctQuery;

package/dist/cjs/utils/tableProcessing.d.ts

@@ -0,0 +1,7 @@
+import { ColumnInfo } from '../components/ReportBuilder/schema';
+export declare const getUniqueValuesByColumns: (columns: ColumnInfo[], query: string, rows: any, client: any) => Promise<{
+    [column: string]: {
+        [value: string]: boolean;
+    };
+} | null>;
+//# sourceMappingURL=tableProcessing.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tableProcessing.d.ts","sourceRoot":"","sources":["../../../src/utils/tableProcessing.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAa,MAAM,oCAAoC,CAAC;AAI3E,eAAO,MAAM,wBAAwB,YAC1B,UAAU,EAAE,SACd,MAAM,QACP,GAAG,UACD,GAAG;;;;SA2DZ,CAAC"}

package/dist/cjs/utils/tableProcessing.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getUniqueValuesByColumns = void 0;
+const dataFetcher_1 = require("./dataFetcher");
+const queryConstructor_1 = require("./queryConstructor");
+const getUniqueValuesByColumns = async (columns, query, rows, client) => {
+    const stringNames = columns.map(
+    // @ts-ignore
+    (column) => column.name || column.field);
+    const uniqueValues = {};
+    if (!client.databaseType ||
+        client.databaseType.toLowerCase() === 'bigquery') {
+        if (rows.length === 0) {
+            const hostedBody = {
+                metadata: {
+                    query: query,
+                    task: 'query',
+                    orgId: client.customerId || '*',
+                    clientId: client.publicKey,
+                    databaseType: client?.databaseType,
+                },
+            };
+            const cloudBody = { query };
+            const data = await (0, dataFetcher_1.getData)(client, 'dashquery', 'same-origin', hostedBody, cloudBody);
+            if (data.errorMessage) {
+                return null;
+            }
+            rows = data.rows;
+        }
+        for (const column of columns) {
+            const values = Array.from(
+            //@ts-ignore
+            new Set(rows.map((row) => row[column.name || column.field])));
+            // @ts-ignore
+            uniqueValues[column.name || column.field] = values.reduce((result, value) => {
+                result[value] = false;
+                return result;
+            }, {});
+        }
+    }
+    else {
+        const distinctValueQuery = (0, queryConstructor_1.generateDistinctQuery)(stringNames, query);
+        const distinctStrings = await fetchDistinctStrings(distinctValueQuery, client);
+        for (const column of distinctStrings) {
+            uniqueValues[column.column] = column.values;
+        }
+    }
+    return uniqueValues;
+};
+exports.getUniqueValuesByColumns = getUniqueValuesByColumns;
+const fetchDistinctStrings = async (query, client) => {
+    try {
+        const hostedBody = {
+            metadata: {
+                query,
+                task: 'query',
+                orgId: client.customerId || '*',
+                clientId: client.publicKey,
+                databaseType: client?.databaseType,
+            },
+        };
+        const cloudBody = { query };
+        const data = await (0, dataFetcher_1.getData)(client, 'dashquery', 'same-origin', hostedBody, cloudBody);
+        if (data.errorMessage) {
+            return null;
+        }
+        const results = data.rows.map((columnInfo) => {
+            const column = columnInfo.field;
+            if (!columnInfo.string_values) {
+                return { column, values: {} };
+            }
+            const values = columnInfo.string_values.reduce((result, value) => {
+                result[value] = false;
+                return result;
+            }, {});
+            return { column, values };
+        });
+        return results;
+    }
+    catch (e) {
+        console.error(e);
+        return null;
+    }
+};

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

@@ -1 +1 @@
-{"version":3,"file":"valueFormatter.d.ts","sourceRoot":"","sources":["../../../src/utils/valueFormatter.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,KAAK,KAAK,GAAG;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,UAAU,CAAC;CACpB,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IACjC,MAAM,EAAE,KAAK,EAAE,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAQ7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,6BAA8B,KAAK,KAAG,MAwChE,CAAC;AAEF,eAAO,MAAM,WAAW;WAIf,GAAG;YACF,MAAM;MACZ,MAoCH,CAAC;AAyKF,eAAO,MAAM,aAAa;;;;WAGhB,MAAM,KACb,MAoCF,CAAC"}
+{"version":3,"file":"valueFormatter.d.ts","sourceRoot":"","sources":["../../../src/utils/valueFormatter.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,KAAK,KAAK,GAAG;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,UAAU,CAAC;CACpB,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IACjC,MAAM,EAAE,KAAK,EAAE,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAQ7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,6BAA8B,KAAK,KAAG,MAwChE,CAAC;AAEF,eAAO,MAAM,WAAW;WAIf,GAAG;YACF,MAAM;MACZ,MAoCH,CAAC;AAoMF,eAAO,MAAM,aAAa;;;;WAGhB,MAAM,KACb,MA6CF,CAAC"}

package/dist/cjs/utils/valueFormatter.js

@@ -54,8 +54,6 @@ const valueFormatter = ({ value, field, fields }) => {
 };
 exports.valueFormatter = valueFormatter;
 const quillFormat = ({ value, format, }) => {
-    if (value === undefined || value === null)
-        return '';
     const HANDLERS = {
         percent: formatPercent,
         dollar_amount: formatDollarAmount,
@@ -67,6 +65,7 @@ const quillFormat = ({ value, format, }) => {
         yyyy: format_YYYY,
         MMM_yyyy: format_MMM_yyyy,
         MMM_dd_yyyy: format_MMM_dd_yyyy,
+        MMM_dd: format_MMM_dd,
         hh_ap_pm: format_hh_ap_pm,
         'MMM_dd-MMM_dd': format_MMM_dd_MMM_dd,
         'MMM_dd_hh:mm_ap_pm': format_MMM_dd_hh_mm_ap_pm,
@@ -78,6 +77,7 @@ const quillFormat = ({ value, format, }) => {
         // if bigquery date type, we have to pull the value out of the json
         if (exports.DATE_FORMAT_TYPES.includes(formatType) &&
             typeof value === 'object' &&
+            value &&
             value.value) {
             return HANDLERS[formatType](value.value);
         }
@@ -93,6 +93,9 @@ exports.quillFormat = quillFormat;
  * Formats the value as a string using the built-in converstion.
  */
 const formatString = (value) => {
+    if (!value) {
+        return 'null';
+    }
     if (typeof value === 'object') {
         return JSON.stringify(value);
     }
@@ -192,6 +195,7 @@ const _getUTCDateHelper = (value, fmt) => {
 const format_YYYY = (value) => _getUTCDateHelper(value, 'yyyy');
 const format_MMM_yyyy = (value) => _getUTCDateHelper(value, 'MMM yyyy');
 const format_hh_ap_pm = (value) => _getUTCDateHelper(value, 'hh:mm aa');
+const format_MMM_dd = (value) => _getUTCDateHelper(value, 'MMM dd');
 const format_MMM_dd_yyyy = (value) => {
     return _getUTCDateHelper(value, 'dd MMM yyyy');
 };
@@ -243,6 +247,26 @@ function parseNumber(value) {
 }
 // Moved this out of parseNumber for perf reasons
 const localeFormatter = Intl.NumberFormat(typeof navigator !== 'undefined' ? navigator.language : 'en-US');
+const FORMATS = [
+    'dd MMM yyyy',
+    'yyyy-mm-dd',
+    'MMM yyyy',
+    'MMM do h a',
+    'MMM do h:mm a',
+];
+function isValidDate(dateString) {
+    const date = getValidDate(dateString);
+    if (date)
+        return true;
+    // Try parsing as native date object
+    const d = new Date(dateString);
+    return !isNaN(d.getTime());
+    // return FORMATS.some((fmt) => isValid(parse(d, fmt, new Date())));
+}
+function getValidDate(dateString) {
+    const dates = FORMATS.map((fmt) => (0, date_fns_1.parse)(dateString, fmt, new Date()));
+    return dates.find((date) => (0, date_fns_1.isValid)(date));
+}
 const compareValues = (a, b, column) => {
     const valueA = a[column];
     const valueB = b[column];
@@ -266,16 +290,24 @@ const compareValues = (a, b, column) => {
     else if (valueB === undefined) {
         return 1; // ValueB is undefined, consider it smaller
     }
+    // For dates
+    if (isValidDate(valueA) && isValidDate(valueB)) {
+        const dateA = new Date(valueA);
+        const dateB = new Date(valueB);
+        if (!isNaN(dateA.getTime()) && !isNaN(dateB.getTime())) {
+            return dateA.getTime() - dateB.getTime();
+        }
+        // Handle edge case for AM/PM date formats
+        const date1 = getValidDate(valueA);
+        const date2 = getValidDate(valueB);
+        if (date1 && date2) {
+            return date1.getTime() - date2.getTime();
+        }
+    }
     // For numbers
     if (!isNaN(parseNumber(valueA)) && !isNaN(parseNumber(valueB))) {
         return parseNumber(valueA) - parseNumber(valueB);
     }
-    // For dates
-    const dateA = new Date(valueA);
-    const dateB = new Date(valueB);
-    if (!isNaN(dateA.getTime()) && !isNaN(dateB.getTime())) {
-        return dateA.getTime() - dateB.getTime();
-    }
     // For strings
     return valueA.localeCompare(valueB);
 };

package/dist/esm/Chart.d.ts

@@ -58,6 +58,18 @@ export interface ChartProps {
      * Whether to hide the cartesian grid lines.
      */
     hideCartesianGrid?: boolean;
+    /**
+     * Whether to hide the horizontal cartesian grid lines (default: false).
+     */
+    hideHorizontalCartesianGrid?: boolean;
+    /**
+     * Whether to hide the vertical cartesian grid lines (default: true).
+     */
+    hideVerticalCartesianGrid?: boolean;
+    /**
+     * Whether to hide the all but the first of the X-Axis ticks (default: false).
+     */
+    hideSubsequentXAxisTicks?: boolean;
     /**
      * Whether the date range filter has been disabled.
      */
@@ -67,6 +79,10 @@ export interface ChartProps {
      * charts (as opposed to the default solid line).
      */
     comparisonLineStyle?: 'solid' | 'dashed';
+    /**
+     * Whether the cartesian grid lines show as dashed lines (default: solid).
+     */
+    cartesianGridLineStyle?: '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.

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

@@ -1 +1 @@
-{"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;AAgGjD,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,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;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,KAAK,UAAW,UAAU,4CAsC/B,CAAC;AAyiBF,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;AAsGjD,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,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;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,iBAAiB,CAAC,EAAE,CAClB,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,UAAU,KACd,YAAY,CAAC;IAElB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,KAAK,UAAW,UAAU,4CA2C/B,CAAC;AAulBF,eAAe,KAAK,CAAC"}

package/dist/esm/Chart.js

@@ -8,7 +8,7 @@ import { ClientContext, DashboardContext, DashboardFiltersContext, } from './Con
 import QuillTable from './components/QuillTable';
 import { getData } from './utils/dataFetcher';
 import { generatePivotTable, generatePivotTableYAxis, } from './internals/ReportBuilder/PivotModal';
-import { valueFormatter } from './utils/valueFormatter';
+import { DATE_FORMAT_TYPES, valueFormatter } from './utils/valueFormatter';
 import LineChart from './components/Chart/LineChart';
 import BarChart from './components/Chart/BarChart';
 import { mergeComparisonRange } from './utils/merge';
@@ -18,6 +18,7 @@ import { COMPARISON_OPTIONS } from './DateRangePicker/dateRangePickerUtils';
 import { quillFormat } from './utils/valueFormatter';
 import { downloadCSV } from './utils/csv';
 import useTheme from './hooks/useTheme';
+const MAX_ROWS_FOR_GENERIC_TABLE = 300;
 // @ts-ignore
 function sumByKey(arr, key) {
     // @ts-ignore
@@ -102,7 +103,8 @@ 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 isLoading = Boolean(!data.config);
+        return (_jsx(ChartDisplay, { ...data, error: isLoading || data.config?.rows ? undefined : 'No rows found', loading: isLoading, isComparison: Boolean(data?.config?.compareRows?.length) }));
     }
     const theme = useTheme();
     const chartColors = useMemo(() => {
@@ -112,9 +114,9 @@ const Chart = (props) => {
                 ? theme.chartColors
                 : ['#4E80EE', '#E14F62', '#55B5A6', '#E9A23B', '#6466E9', '#55B685'];
     }, [data.colors]);
-    return (_jsx(ChartUpdater, { chartId: data.chartId, className: data.className, 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 }));
+    return (_jsx(ChartUpdater, { chartId: data.chartId, className: data.className, containerStyle: data.containerStyle, colors: chartColors, isAnimationActive: data.isAnimationActive, hideXAxis: data.hideXAxis, hideYAxis: data.hideYAxis, hideCartesianGrid: data.hideCartesianGrid, hideHorizontalCartesianGrid: data.hideHorizontalCartesianGrid, hideVerticalCartesianGrid: data.hideVerticalCartesianGrid, hideSubsequentXAxisTicks: data.hideSubsequentXAxisTicks, hideDateRangeFilter: data.hideDateRangeFilter, cartesianGridLineStyle: data.cartesianGridLineStyle, comparisonLineStyle: data.comparisonLineStyle, mapColorsToFields: data.mapColorsToFields ?? fallbackMapColorsToFields }));
 };
-const ChartUpdater = ({ colors, chartId, className, containerStyle, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, comparisonLineStyle, hideDateRangeFilter, mapColorsToFields, }) => {
+const ChartUpdater = ({ colors, chartId, className, containerStyle, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', comparisonLineStyle, hideDateRangeFilter = false, mapColorsToFields, }) => {
     const { dispatch, dashboard } = useContext(DashboardContext);
     const { dashboardFilters } = useContext(DashboardFiltersContext);
     const [initialLoad, setInitialLoad] = useState(true);
@@ -191,9 +193,9 @@ const ChartUpdater = ({ colors, chartId, className, containerStyle, isAnimationA
         setInitialLoad(false);
         getChartOptions();
     }, [dashboardFilters, client, chartId]);
-    return (_jsx(ChartDisplay, { config: dashboard[chartId], colors: colors, className: className, containerStyle: containerStyle, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, comparisonLineStyle: comparisonLineStyle, isAnimationActive: isAnimationActive, isComparison: isComparison, loading: loading || initialLoad, error: error, colorMap: colorMap }));
+    return (_jsx(ChartDisplay, { config: dashboard[chartId], colors: colors, className: className, containerStyle: containerStyle, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, hideHorizontalCartesianGrid: hideHorizontalCartesianGrid, hideVerticalCartesianGrid: hideVerticalCartesianGrid, hideSubsequentXAxisTicks: hideSubsequentXAxisTicks, cartesianGridLineStyle: cartesianGridLineStyle, hideDateRangeFilter: hideDateRangeFilter, comparisonLineStyle: comparisonLineStyle, isAnimationActive: isAnimationActive, isComparison: isComparison, loading: loading || initialLoad, error: error, colorMap: colorMap }));
 };
-const ChartDisplay = ({ config, colors, className, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, comparisonLineStyle, isAnimationActive, loading = false, error = undefined, isComparison = false, colorMap, }) => {
+const ChartDisplay = ({ config, colors, className, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, hideDateRangeFilter = false, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', comparisonLineStyle, isAnimationActive, loading = false, error = undefined, isComparison = false, colorMap, }) => {
     const { dashboardFilters } = useContext(DashboardFiltersContext);
     const theme = useTheme();
     const chartColors = useMemo(() => {
@@ -203,7 +205,8 @@ const ChartDisplay = ({ config, colors, className, containerStyle, hideXAxis, hi
                 ? theme.chartColors
                 : ['#4E80EE', '#E14F62', '#55B5A6', '#E9A23B', '#6466E9', '#55B685'];
     }, [colors]);
-    const dateFilter = Object.values(dashboardFilters).find((filter) => filter.filterType == 'date_range');
+    const dateFilter = !hideDateRangeFilter &&
+        Object.values(dashboardFilters).find((filter) => filter.filterType == 'date_range');
     const isPivot = config?.pivot;
     const pivotTable = useMemo(() => {
         const pivot = config?.pivot;
@@ -234,10 +237,15 @@ const ChartDisplay = ({ config, colors, className, containerStyle, hideXAxis, hi
     if (error) {
         return _jsx(ChartError, { className: className, containerStyle: containerStyle });
     }
+    else if (!pivotTable &&
+        config &&
+        config.rows &&
+        config.rows.length > MAX_ROWS_FOR_GENERIC_TABLE) {
+        return (_jsx(ChartError, { className: className, containerStyle: containerStyle, label: "Charts can only display 100 rows. Please add a pivot or modify the query." }));
+    }
     else if (!config || loading) {
-        return _jsx(ChartSkeleton, { className: className, containerStyle: containerStyle });
+        return (_jsx(ChartSkeleton, { className: className, containerStyle: containerStyle }));
     }
-    // TODO: Figure out if we can use ?? to coalesce these into the variable.
     const chartTypes = [config?.chartType];
     if (chartTypes.includes('pie')) {
         const rows = pivotTable ? pivotTable.rows : config.rows;
@@ -299,13 +307,18 @@ const ChartDisplay = ({ config, colors, className, containerStyle, hideXAxis, hi
     const yAxisFields = pivotTableYAxis
         ? pivotTableYAxis
         : config.yAxisFields;
-    if (isComparison && yAxisFields.length == 1) {
-        const sampleField = yAxisFields[0];
-        yAxisFields[yAxisFields.length] = {
-            ...sampleField,
-            field: `comparison_${sampleField?.field}`,
-            label: `comparison ${sampleField?.label}`,
-        };
+    if (yAxisFields.length === 1) {
+        if (yAxisFields[0].label === '' && config.yAxisFields.length === 1) {
+            yAxisFields[0].label = config.yAxisFields[0].label;
+        }
+        if (isComparison) {
+            const sampleField = yAxisFields[0];
+            yAxisFields[yAxisFields.length] = {
+                ...sampleField,
+                field: `comparison_${sampleField?.field}`,
+                label: `comparison ${sampleField?.label}`,
+            };
+        }
     }
     const data = (pivotTable ? pivotTable.rows : config.rows)
         // filter out any rows with a comparison key but no corresponding primary
@@ -366,7 +379,7 @@ const ChartDisplay = ({ config, colors, className, containerStyle, hideXAxis, hi
                         gap: 4,
                         alignItems: 'baseline',
                         marginRight: 'auto',
-                    }, children: [_jsx("span", { children: data.rows?.length > 0 &&
+                    }, children: [_jsx("span", { children: rows?.length > 0 &&
                                 valueFormatter({
                                     value: rows[0][data.xAxisField] ?? 0,
                                     field: data.xAxisField,
@@ -422,7 +435,10 @@ const ChartDisplay = ({ config, colors, className, containerStyle, hideXAxis, hi
     // Autofill the line chart with two zero values, so they form a line at 0.0
     // when there are no rows on the config.
     let lineChartData = data;
-    if (dateFilter && (!data || data.length === 0)) {
+    const xAxisFieldFormat = config.columns.find((col) => col.field === config.xAxisField)?.format;
+    if (dateFilter &&
+        DATE_FORMAT_TYPES.includes(xAxisFieldFormat) &&
+        (!data || data.length === 0)) {
         const xAxis = config.xAxisField;
         const yAxis = yAxisFields[0]?.field;
         const format = config.columns.find((c) => c.field === xAxis).format;
@@ -433,6 +449,6 @@ const ChartDisplay = ({ config, colors, className, containerStyle, hideXAxis, 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, className: className, theme: theme, comparison: dateFilter?.comparison, isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, comparisonLineStyle: comparisonLineStyle ?? 'solid' }));
+    return (_jsx(LineChart, { colors: chartColors, colorMap: colorMap, yAxisFields: yAxisFields, 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' }));
 };
 export default Chart;