@datarailsshared/dr_renderer 1.4.67 → 1.4.80

package/README.md

@@ -23,4 +23,42 @@ To compile types for the project use: `npm run build:types`
 
 Just merge to master branch
 
+## Error Handling
+
+The renderer includes a comprehensive error handling system with specific error types for different scenarios:
+
+### Error Codes
+
+The following error codes are available via `RendererErrorCodes`:
+
+- `NoDataError` (1) - No data is available for rendering
+- `TooMuchDataError` (3) - Dataset exceeds capacity 
+- `DataConflictError` (5) - Conflicts detected in data being processed
+- `GaugeConfigurationError` (6) - Gauge chart missing required data
+- `GenericRenderingError` (7) - Generic rendering failure in PivotTable components
+- `GenericComputationalError` (8) - Generic computational failure in PivotTable components
+
+### Error Classes
+
+All errors extend the `BaseRendererError` class which includes:
+- `code` - Unique error code for identification
+- `title` - Human-readable error message
+- `options` - Additional context or configuration
+
+### Usage Example
+
+```javascript
+const { RendererErrorCodes, NoDataError, TooMuchDataError } = require('@datarailsshared/dr_renderer');
+
+try {
+    // Your rendering code here
+} catch (error) {
+    if (error instanceof NoDataError) {
+        console.log('No data available:', error.title);
+    } else if (error.code === RendererErrorCodes.TooMuchDataError) {
+        console.log('Too much data:', error.title);
+    }
+}
+```
+
 ###

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datarailsshared/dr_renderer",
-  "version": "1.4.67",
+  "version": "1.4.80",
   "description": "DataRails charts and tables renderer",
   "keywords": [
     "datarails",

package/src/dr_pivottable.js

@@ -1,5 +1,5 @@
 const { DR_SCENARIO } = require('./smart_queries_helper');
-
+const { TooMuchDataError } = require('./errors');
 
 let initDRPivotTable = function($, window, document) {
     var hasProp = {}.hasOwnProperty;
@@ -437,7 +437,6 @@ let initDRPivotTable = function($, window, document) {
 
             return resultsArr;
         } else {
-            let tooMuch = false;
             const show_more_than_thousand_rows = _.get(opts, 'chartOptions.table_options.show_more_than_thousand_rows', false);
             if (pvtData &&
                 (pvtData.rowKeys.length > 1000 || pvtData.colKeys.length > 500) &&
@@ -445,15 +444,16 @@ let initDRPivotTable = function($, window, document) {
                 !show_more_than_thousand_rows) {
                 pvtData.rowKeys = [];
                 pvtData.colKeys = [];
-                tooMuch = true;
-                opts.error_has_occurred = true;
-                opts.error_params = $.pivotUtilities.errorHandling.placeholders.tooMuchData;
+
+                const tooMuchDataError = new TooMuchDataError();
+                console.error(tooMuchDataError.title);
+                throw tooMuchDataError;
             }
-            return SubtotalRenderer(pvtData, opts, charttype, tooMuch, opts.error_params);
+            return SubtotalRenderer(pvtData, opts, charttype);
         }
     }
 
-    SubtotalRenderer = function(pivotData, opts, charttype, tooMuch = false, error_params) {
+    SubtotalRenderer = function(pivotData, opts, charttype) {
         var addClass, allTotal, arrowCollapsed, arrowExpanded, buildColHeaderHeader, buildColHeaderHeaders, buildColHeaderHeadersClickEvents, buildColHeaders, buildColTotals, buildColTotalsHeader, buildGrandTotal, buildRowHeaderHeaders, buildRowHeaderHeadersClickEvents, buildRowHeaders, buildRowTotalsHeader, buildValues, classColCollapsed, classColExpanded, classColHide, classColShow, classCollapsed, classExpanded, classRowCollapsed, classRowExpanded, classRowHide, classRowShow, clickStatusCollapsed, clickStatusExpanded, colAttrs, colDisableAfter, colKeys, colTotals, collapseCol, collapseColsAt, collapseHideDescendantRow, collapseRow, collapseRowsAt, collapseShowColSubtotal, collapseShowRowSubtotal, applyInlineStyles, createElement, defaults, expandChildCol, expandChildRow, expandCol, expandColsAt, expandHideColSubtotal, expandHideRowSubtotal, expandRow, expandRowsAt, expandShowColSubtotal, expandShowRowSubtotal, getTableEventHandlers, hasClass, hideDescendantCol, isColDisable, isColDisableExpandCollapse, isColHideOnExpand, isRowDisable, isRowDisableExpandCollapse, isRowHideOnExpand, main, getSubtotalInBrackets, processKeys, encodeHtmlEntities, ref, ref1, ref2, ref3, ref4, ref5, ref6, ref7, removeClass, replaceClass, rowAttrs, rowDisableAfter, rowKeys, rowTotals, setAttributes, showChildCol, showChildRow, toggleCol, toggleColHeaderHeader, toggleRow, toggleRowHeaderHeader, tree, subscribeToClick;
         var createTotalValsBolder, createGrandTotalBolder, getHeaderColorProperties, colorizeRowLabelHeaders, colorizeTableIfNeed, valueNoDashes, getColorsWithOffsetForTable, offsetColors, handleFreezePanesScroll, selectFreezableElements, removeRowHeaderNullValue;
         var getAdditionalAggregation, buildAdditionalHeaderCols, buildAdditionalHeaderRows, buildAdditionalColValues, buildAdditionalRowValues, buildAdditionalRowTotals, buildAdditionalColTotals;
@@ -2356,6 +2356,9 @@ let initDRPivotTable = function($, window, document) {
         main = function(rowAttrs, rowKeys, colAttrs, colKeys, pivotData) {
             if (opts.chartOptions.isSmartQueriesEnabled) {
                 rowKeys = rowKeys.filter(rowKey => !rowKey.includes(DR_SCENARIO.SQ_Actuals));
+                rowKeys = Array.from(
+                    new Set(rowKeys.map(JSON.stringify))
+                ).map(JSON.parse);
             }
             var c,rowspan, colHeaderCols, colHeaderHeaders, colHeaders, h, k, l, len, len1, result, rowHeaderHeaders, rowHeaderRows, rowHeaders, tbody, thead, tr;
             rowHeaders = [];
@@ -2494,24 +2497,13 @@ let initDRPivotTable = function($, window, document) {
                 resultsArr.push(subTitle);
             }
 
-            if (tooMuch) {
-                const defaultPlaceholder = $(`
-                        <div class="noData--table-many-rows">
-                            <span><i class="noData-icon dr-icon-info"></i> There are too many rows to display in the table.</span>
-                            <span>Please filter or change the table type in options.</span>
-                        </div>
-                `);
-
-                resultsArr.push($.pivotUtilities.errorHandling.getErrorPlaceholder(error_params) || defaultPlaceholder);
-            } else {
-                var tableContainer = document.createElement("div");
-                tableContainer.className = "pivot-div";
-                tableContainer.appendChild(result);
-                if (opts.chartOptions.table_options.freeze_panes) {
-                    tableContainer.onscroll = handleFreezePanesScroll(selectFreezableElements(tableContainer));
-                }
-                resultsArr.push(tableContainer);
+            var tableContainer = document.createElement("div");
+            tableContainer.className = "pivot-div";
+            tableContainer.appendChild(result);
+            if (opts.chartOptions.table_options.freeze_panes) {
+                tableContainer.onscroll = handleFreezePanesScroll(selectFreezableElements(tableContainer));
             }
+            resultsArr.push(tableContainer);
 
             var wrapper = document.createElement("div");
             wrapper.className = "pivot-wrapper";
@@ -2522,7 +2514,7 @@ let initDRPivotTable = function($, window, document) {
         };
         return main(rowAttrs, rowKeys, colAttrs, colKeys, pivotData);
     };
-    // $.pivotUtilities.subtotal_renderers = SubtotalRenderer;
+
     $.pivotUtilities.subtotal_renderers = NovixRenderer;
     $.pivotUtilities.delim = delim;
 

package/src/errors.js

@@ -0,0 +1,174 @@
+/**
+ * Enum for dr renderer error codes.
+ * @readonly
+ * @enum {number}
+ */
+const RendererErrorCodes = {
+    NoDataError: 1,
+    TooMuchDataError: 3,
+    DataConflictError: 5,
+    GaugeConfigurationError: 6,
+    GenericRenderingError: 7,
+    GenericComputationalError: 8
+};
+
+/**
+ * Base error class for all renderer-related errors.
+ * @class BaseRendererError
+ * @extends Error
+ */
+class BaseRendererError extends Error {
+    /**
+     * Error code for identification purposes
+     * @type {number}
+     */
+    code = 0;
+    
+    /**
+     * Human-readable error title
+     * @type {string}
+     */
+    title = '';
+    
+    /**
+     * Additional options or context for the error
+     * @type {Object}
+     */
+    options = {};
+
+    /**
+     * Creates a new BaseRendererError instance.
+     * @param {Object} config - Error configuration object
+     * @param {number} config.code - Unique error code
+     * @param {string} config.title - Error title/message
+     * @param {Object} [config.options={}] - Additional error options or context
+     */
+    constructor({ code, title, options }) {
+        super();
+        this.code = code;
+        this.title = title;
+        this.options = options || {};
+    }
+}
+
+/**
+ * Error thrown when no data is available.
+ * @class NoDataError
+ * @extends BaseRendererError
+ */
+class NoDataError extends BaseRendererError {
+    /**
+     * Creates a new NoDataError instance.
+     * This error is thrown when a widget or component has no available data.
+     */
+    constructor() {
+        super({
+            code: RendererErrorCodes.NoDataError,
+            title: 'No Data Available',
+        });
+    }
+}
+
+/**
+ * Error thrown when there is too much data to render efficiently.
+ * @class TooMuchDataError
+ * @extends BaseRendererError
+ */
+class TooMuchDataError extends BaseRendererError {
+    /**
+     * Creates a new TooMuchDataError instance.
+     * This error is thrown when the dataset exceeds the renderer's capacity
+     * and requires the user to edit the widget.
+     */
+    constructor() {
+        super({
+            code: RendererErrorCodes.TooMuchDataError,
+            title: 'There is too much data. Please edit this widget',
+        });
+    }
+}
+
+/**
+ * Error thrown when there are conflicts in the data being processed.
+ * @class DataConflictError
+ * @extends BaseRendererError
+ */
+class DataConflictError extends BaseRendererError {
+    /**
+     * Creates a new DataConflictError instance.
+     * @param {Object} [options] - Additional context about the data conflict.
+     */
+    constructor(options) {
+        super({
+            code: RendererErrorCodes.DataConflictError,
+            title: 'Data Conflict',
+            options
+        });
+    }
+}
+
+/**
+ * Error thrown when a gauge chart is missing required info.
+ * @class GaugeConfigurationError
+ * @extends BaseRendererError
+ */
+class GaugeConfigurationError extends BaseRendererError {
+    /**
+     * Creates a new GaugeConfigurationError instance.
+     */
+    constructor() {
+        super({
+            code: RendererErrorCodes.GaugeConfigurationError,
+            title: 'Please configure goal and needle',
+        });
+    }
+}
+
+/**
+ * Generic error for rendering failures in PivotTable components.
+ * @class GenericRenderingError
+ * @extends BaseRendererError
+ */
+class GenericRenderingError extends BaseRendererError {
+    /**
+     * Creates a new GenericRenderingError instance.
+     * This error is thrown when an unexpected error occurs during
+     * the rendering process of PivotTable results.
+     */
+    constructor() {
+        super({
+            code: RendererErrorCodes.GenericRenderingError,
+            title: 'An error occurred rendering the PivotTable results.',
+        });
+    }
+}
+
+/**
+ * Generic error for computational failures in PivotTable components.
+ * @class GenericComputationalError
+ * @extends BaseRendererError
+ */
+class GenericComputationalError extends BaseRendererError {
+    /**
+     * Creates a new GenericComputationalError instance.
+     * This error is thrown when an unexpected error occurs during
+     * the computation process of PivotTable results.
+     */
+    constructor() {
+        super({
+            code: RendererErrorCodes.GenericComputationalError,
+            title: 'An error occurred computing the PivotTable results.',
+        });
+    }
+}
+
+module.exports = {
+    RendererErrorCodes,
+    BaseRendererError,
+    TooMuchDataError,
+    NoDataError,
+    DataConflictError,
+    GaugeConfigurationError,
+    GenericRenderingError,
+    GenericComputationalError
+};

package/src/highcharts_renderer.js

@@ -4,6 +4,15 @@ const { DrDonutChart } = require('./charts/dr_donut_chart');
 const seriesPointStylesHelper= require('./seriesPointStyles-helper');
 const smartQueriesHelper = require('./smart_queries_helper');
 const {DrGaugeCategoriesSummaryChart} = require("./charts/dr_gauge_categories_summary_chart");
+const {
+    TooMuchDataError,
+    NoDataError,
+    BaseRendererError,
+    DataConflictError,
+    GaugeConfigurationError,
+    GenericRenderingError,
+    GenericComputationalError
+} = require('./errors');
 
 const mobileBrowserRegex = new RegExp([
     '(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)',
@@ -204,6 +213,34 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     highchartsRenderer.enabledNewWidgetValueFormatting = false;
     let disableAnimation = false;
 
+    const _handleComputationalError = (err, onlyOptions) => {
+        if (err instanceof BaseRendererError) {
+            throw err;
+        }
+
+        const genericError = new GenericComputationalError();
+        if (onlyOptions) {
+            console.error(genericError.title);
+            return {};
+        } else {
+            throw genericError;
+        }
+    };
+
+    const _handleRenderingError = (err, onlyOptions) => {
+        if (err instanceof BaseRendererError) {
+            throw err;
+        }
+
+        const genericError = new GenericRenderingError();
+        console.error(genericError.title);
+        if (onlyOptions) {
+            return {};
+        } else {
+            throw genericError;
+        }
+    }
+
     highchartsRenderer.hasFeature = function(featureFlagKey) {
         return lodash.includes(lodash.get(document, 'ReportHippo.user.features', []), featureFlagKey);
     }
@@ -1039,26 +1076,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return forExport;
     };
 
-    highchartsRenderer.getNoDataResult = function (to_match) {
-        var temp_result = $('<div class="noData-box"></div>');
-        var resultsArr = [];
-
-        if (to_match) {
-            resultsArr.push(highchartsRenderer.getWidgetPlaceholder(highchartsRenderer.widgetPlaceholders.tooMuchData));
-        } else {
-            resultsArr.push(highchartsRenderer.getWidgetPlaceholder(highchartsRenderer.widgetPlaceholders.nodata));
-        }
-
-        temp_result.html(resultsArr);
-
-        return temp_result;
-    };
-
-    highchartsRenderer.getWidgetPlaceholder = function(placeholder) {
-        const defaultPlaceholder = $('<div class="noData"><i class="noData-image"></i> no data</div>');
-        return $.pivotUtilities.errorHandling.getErrorPlaceholder(placeholder) || defaultPlaceholder;
-    }
-
     highchartsRenderer.ptCreateElementAndDraw = function (chartOptions, opts) {
         chartOptions = lodash.merge(highchartsRenderer.getCommonChartOptions(opts.chartOptions), chartOptions);
 
@@ -1159,13 +1176,13 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }
 
         if (!seriesDataLength && !chartOptions.onlyText) {
-            result = highchartsRenderer.getNoDataResult();
-            opts.error_has_occurred = true;
-            opts.error_params = highchartsRenderer.widgetPlaceholders.nodata;
+            const noDataError = new NoDataError();
+            console.error(noDataError.title);
+            throw noDataError;
         } else if (!chartOptions.onlyText && chartOptions.series && toMatch) {
-            result = highchartsRenderer.getNoDataResult(toMatch);
-            opts.error_has_occurred = true;
-            opts.error_params = highchartsRenderer.widgetPlaceholders.tooMuchData;
+            const tooMuchDataError = new TooMuchDataError();
+            console.error(tooMuchDataError.title);
+            throw tooMuchDataError;
         } else {
             chartOptions = highchartsRenderer.updateChartOptions(chartOptions, opts);
             chartOptions = highchartsRenderer.updateChartOptions(chartOptions, {credits: {enabled: false}});
@@ -1233,6 +1250,19 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         var chart_series = [],
             row_n_keys = pivotData.getRowKeys(),
             col_n_keys = pivotData.getColKeys();
+        const chartType = chartOptions && chartOptions.chart && chartOptions.chart.type ? chartOptions.chart.type : null;
+        const isCombiLineForecastChart = opts.chartOptions.isSmartQueriesEnabled;
+        const indexOfScenarioCycleFilter = lodash.findIndex(pivotData.rowAttrs, (rowAttr) => rowAttr === 'Scenario Cycle');
+
+        if (isChartTypeSupportedForSmartQuery(chartType) && pivotData.rowAttrs?.length < row_n_keys?.[0]?.length && indexOfScenarioCycleFilter > -1) {
+            const indexOfScenarioFilter = row_n_keys[0].length - 1;
+            for (let i = 0; i < row_n_keys?.length; i++) {
+                row_n_keys[i].splice(indexOfScenarioFilter, 1);
+            }
+            row_n_keys = Array.from(
+                new Set(row_n_keys.map(JSON.stringify))
+            ).map(JSON.parse);
+        }
 
         var has_delta = false;
         if (additionOptions && lodash.has(additionOptions, "delta_column.field") && additionOptions.delta_column.field == "series") {
@@ -1413,8 +1443,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         chart_series = chart_series.concat(trendSerieses);
 
         highchartsRenderer.moveSeriesToSecondYAxisIfNeeded(chart_series, pivotData, chartOptions, additionOptions, opts, opts.total && opts.totalSeriesSettings && opts.totalSeriesSettings.secondaryAxis);
-        const chartType = chartOptions && chartOptions.chart && chartOptions.chart.type ? chartOptions.chart.type : null;
-        const isCombiLineForecastChart = opts.chartOptions.isSmartQueriesEnabled;
         const smartQuerySeries = isChartTypeSupportedForSmartQuery(chartType)
             ? smartQueriesHelper.createSingleDataSeriesForForecast(chart_series, opts.chartOptions, pivotData, isCombiLineForecastChart)
             : null;
@@ -4459,19 +4487,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
             if (uniqueCategories && ((maxCategories && uniqueCategories.length > maxCategories)
                 || (minCategories && uniqueCategories.length < minCategories))) {
-                options.error_has_occurred = true;
-                const breakdownText = `Please adjust your dashboard's reference date or filter selections as \
-                the quantity of data doesn't match the limit of at least ${ minCategories } values.`;
-                const walkthroughText = `Please adjust your dashboard's reference date and filter selections as \
-                the quantity of data doesn't match the chart's ${ minCategories }-${ maxCategories } value limit.`;
-
-                options.error_params = {
-                    title: 'Data Conflict',
-                    text: isBreakdown ? breakdownText : walkthroughText,
-                    class: uniqueCategories.length < minCategories ? 'waterfall-nodata' : 'waterfall-too-much-data',
-                }
-
-                return highchartsRenderer.getNoDataResult(true);
+                const dataConflictError = new DataConflictError({
+                    chartType: lodash.get(widget, 'chart_type'),
+                    uniqueCategories,
+                    minCategories,
+                    maxCategories
+                });
+                console.error(dataConflictError.title);
+                throw dataConflictError;
             }
         }
 
@@ -4480,9 +4503,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 return {};
             }
 
-            options.error_has_occurred = true;
-            options.error_params = highchartsRenderer.widgetPlaceholders.nodata;
-            return highchartsRenderer.getNoDataResult();
+            const noDataError = new NoDataError();
+            console.error(noDataError.title);
+            throw noDataError;
         }
 
         if (rowData.length > highchartsRenderer.MAX_ROWS_FOR_SHOW_RESULTS) {
@@ -4490,9 +4513,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 return {};
             }
 
-            options.error_has_occurred = true;
-            options.error_params = highchartsRenderer.widgetPlaceholders.tooMuchData;
-            return highchartsRenderer.getNoDataResult(true);
+            const tooMuchDataError = new TooMuchDataError();
+            console.error(tooMuchDataError.title);
+            throw tooMuchDataError;
         }
 
         var tmp = $.pivotUtilities.aggregatorTemplates;
@@ -4554,28 +4577,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
                 result = opts.renderer(pivotData, opts.rendererOptions);
             } catch (_error) {
-                e = _error;
-                if (typeof console !== "undefined" && console !== null) {
-                    console.error(e.stack);
-                }
-                result = $("<span>").html(opts.localeStrings.renderError);
-                if (options.onlyOptions) {
-                    result = {};
-                }
+                result = _handleRenderingError(_error, options.onlyOptions);
             }
 
             if (lodash.isObject(lodash.get(widget, 'pivot'))) {
                 widget.pivot.sortByValueAttrs = pivotData.sortByValueAttrs;
             }
         } catch (_error) {
-            e = _error;
-            if (typeof console !== "undefined" && console !== null) {
-                console.error(e.stack);
-            }
-            result = $("<span>").html(opts.localeStrings.computeError);
-            if (options.onlyOptions) {
-                result = {};
-            }
+            result = _handleComputationalError(_error, options.onlyOptions);
         }
 
         return result;
@@ -4613,19 +4622,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
             if (uniqueCategories && ((maxCategories && uniqueCategories.length > maxCategories)
                 || (minCategories && uniqueCategories.length < minCategories))) {
-                options.error_has_occurred = true;
-                const breakdownText = `Please adjust your dashboard's reference date or filter selections as \
-                the quantity of data doesn't match the limit of at least ${ minCategories } values.`;
-                const walkthroughText = `Please adjust your dashboard's reference date and filter selections as \
-                the quantity of data doesn't match the chart's ${ minCategories }-${ maxCategories } value limit.`;
-
-                options.error_params = {
-                    title: 'Data Conflict',
-                    text: isBreakdown ? breakdownText : walkthroughText,
-                    class: uniqueCategories.length < minCategories ? 'waterfall-nodata' : 'waterfall-too-much-data',
-                }
-
-                return highchartsRenderer.getNoDataResult(true);
+                const dataConflictError = new DataConflictError({
+                    chartType: lodash.get(widget, 'chart_type'),
+                    uniqueCategories,
+                    minCategories,
+                    maxCategories
+                });
+                console.error(dataConflictError.title);
+                throw dataConflictError;
             }
         }
 
@@ -4634,9 +4638,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 return {};
             }
 
-            options.error_has_occurred = true;
-            options.error_params = highchartsRenderer.widgetPlaceholders.nodata;
-            return highchartsRenderer.getNoDataResult();
+            const noDataError = new NoDataError();
+            console.error(noDataError.title);
+            throw noDataError;
         }
 
         if (rowData.length > highchartsRenderer.MAX_ROWS_FOR_SHOW_RESULTS) {
@@ -4644,9 +4648,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 return {};
             }
 
-            options.error_has_occurred = true;
-            options.error_params = highchartsRenderer.widgetPlaceholders.tooMuchData;
-            return highchartsRenderer.getNoDataResult(true);
+            const tooMuchDataError = new TooMuchDataError();
+            console.error(tooMuchDataError.title);
+            throw tooMuchDataError;
         }
 
         if (lodash.get(widget, 'chart_type') === highchartsRenderer.CHART_TYPES.GAUGE_CHART_DYNAMIC_GOAL) {
@@ -4655,14 +4659,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 || !lodash.get(widget, 'options.chartOptions.dynamicGaugeConfig.needle');
 
             if (noNeedleOrGoalSelected) {
-                options.error_has_occurred = true;
-                options.error_params = {
-                    title: 'Please configure goal and needle',
-                    // TODO: add text
-                    text: '',
-                    class: 'configure-gauge-settings',
-                }
-                return highchartsRenderer.getNoDataResult(true);
+                const gaugeError = new GaugeConfigurationError();
+                console.error(gaugeError.title);
+                throw gaugeError;
             }
         }
 
@@ -4724,28 +4723,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
                 result = opts.renderer(pivotData, opts.rendererOptions);
             } catch (_error) {
-                e = _error;
-                if (typeof console !== "undefined" && console !== null) {
-                    console.error(e.stack);
-                }
-                result = $("<span>").html(opts.localeStrings.renderError);
-                if (options.onlyOptions) {
-                    result = {};
-                }
+                result = _handleRenderingError(_error, options.onlyOptions);
             }
 
             if (lodash.isObject(lodash.get(widget, 'pivot'))) {
                 widget.pivot.sortByValueAttrs = pivotData.sortByValueAttrs;
             }
         } catch (_error) {
-            e = _error;
-            if (typeof console !== "undefined" && console !== null) {
-                console.error(e.stack);
-            }
-            result = $("<span>").html(opts.localeStrings.computeError);
-            if (options.onlyOptions) {
-                result = {};
-            }
+            result = _handleComputationalError(_error, options.onlyOptions);
         }
 
         return result;
@@ -6079,8 +6064,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return highchartsRenderer.chartsTypesInfo[type] ? highchartsRenderer.chartsTypesInfo[type].legendName : CHART_LEGEND_DEFAULT_LABEL;
     };
 
-    highchartsRenderer.widgetPlaceholders = lodash.assign({}, $.pivotUtilities.errorHandling.placeholders);
-
     const suboptionsFontSizeValues = (lodash.map(lodash.fill(new Array(19), null), function (item, index) {
         const fontValue = index + 6;
         return { label: fontValue, value: fontValue }
@@ -10024,7 +10007,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         e.point.name = e.point.initialName;
         e.point.series.name = lodash.get(e.point.series, 'userOptions.initialName', e.point.series.name);
         const seriesData = lodash.get(e.point.series, 'userOptions.data');
-        const initialNameForSmartQueries = seriesData 
+        const initialNameForSmartQueries = seriesData
             ? lodash.find(seriesData, obj => obj.name === e.point.name)
             : null;
         if (initialNameForSmartQueries && initialNameForSmartQueries.type) {

package/src/index.d.ts

@@ -1,5 +1,6 @@
 export * from './types';
 import DataFormatterType = require('./dataformatter');
+import * as ErrorTypes from './types/errors';
 
 declare module '*.css' {
     const content: { [className: string]: string };
@@ -45,6 +46,16 @@ declare namespace DrRenderFactory {
         getInitPublishedItemsRenderer(publishedItemsRenderer: any, bind?: any): any;
 
         DataFormatter: typeof DataFormatterType;
+        
+        // Error types and classes
+        RendererErrorCodes: typeof ErrorTypes.RendererErrorCodes;
+        BaseRendererError: typeof ErrorTypes.BaseRendererError;
+        TooMuchDataError: typeof ErrorTypes.TooMuchDataError;
+        NoDataError: typeof ErrorTypes.NoDataError;
+        DataConflictError: typeof ErrorTypes.DataConflictError;
+        GaugeConfigurationError: typeof ErrorTypes.GaugeConfigurationError;
+        GenericRenderingError: typeof ErrorTypes.GenericRenderingError;
+        GenericComputationalError: typeof ErrorTypes.GenericComputationalError;
     }
 }