@datarailsshared/dr_renderer 1.5.202 → 1.5.214

package/package.json

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

package/src/charts/formatters/index.d.ts

@@ -0,0 +1,7 @@
+import valueFormatter = require("./value.formatter");
+import stackLabelsFormatter = require("./stack-labels.formatter");
+export let getAggregatorPercentageValueIfRequired: typeof valueFormatter.getAggregatorPercentageValueIfRequired;
+export let getRelatedValue: typeof valueFormatter.getRelatedValue;
+export let isAbsoluteValue: typeof valueFormatter.isAbsoluteValue;
+export let createStackLabelsFormatter: typeof stackLabelsFormatter.createStackLabelsFormatter;
+export let createBarStackLabelsFormatter: typeof stackLabelsFormatter.createBarStackLabelsFormatter;

package/src/charts/formatters/index.js

@@ -0,0 +1,22 @@
+/**
+ * @fileoverview Chart Formatters
+ *
+ * This module provides formatter functions used by Highcharts renderers
+ * for data labels, stack labels, and value formatting.
+ *
+ * @module @datarailsshared/dr_renderer/charts/formatters
+ */
+
+const valueFormatter = require('./value.formatter');
+const stackLabelsFormatter = require('./stack-labels.formatter');
+
+module.exports = {
+    // Value formatter
+    getAggregatorPercentageValueIfRequired: valueFormatter.getAggregatorPercentageValueIfRequired,
+    getRelatedValue: valueFormatter.getRelatedValue,
+    isAbsoluteValue: valueFormatter.isAbsoluteValue,
+
+    // Stack labels formatters
+    createStackLabelsFormatter: stackLabelsFormatter.createStackLabelsFormatter,
+    createBarStackLabelsFormatter: stackLabelsFormatter.createBarStackLabelsFormatter,
+};

package/src/charts/formatters/stack-labels.formatter.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Creates a Highcharts stackLabels formatter for stacked column charts.
+ * Reads totals from the pivot model via `pivotData.getAggregator` instead of
+ * relying on Highcharts' `this.total`, which can exclude segments too small to render.
+ * Supports `present_total`, `hide_subtotals`, and `show_percentage` label options.
+ *
+ * @param {{ getAggregator: (rowKey: Array, colKey: Array) => { sum: number, format: (value: number, flag: boolean) => string, value: () => number } | null, colKeys: Array<Array> }} pivotData - The pivot data model.
+ * @param {{ label?: { present_total?: boolean, hide_subtotals?: boolean, show_percentage?: boolean } } | null} additionOptions - Chart label options.
+ * @returns {function(): string} A Highcharts stackLabels formatter function (bound to Highcharts stack context with `this.x` and `this.isNegative`).
+ */
+export function createStackLabelsFormatter(pivotData: {
+    getAggregator: (rowKey: any[], colKey: any[]) => {
+        sum: number;
+        format: (value: number, flag: boolean) => string;
+        value: () => number;
+    } | null;
+    colKeys: Array<any[]>;
+}, additionOptions: {
+    label?: {
+        present_total?: boolean;
+        hide_subtotals?: boolean;
+        show_percentage?: boolean;
+    };
+} | null): () => string;
+/**
+ * Creates a Highcharts stackLabels formatter for stacked bar charts.
+ * Uses `pivotData.getAggregator` for accurate totals instead of Highcharts' `this.total`.
+ * Always displays the formatted total — does not support `present_total`, `hide_subtotals`,
+ * or `show_percentage` options as these are not available for bar stacked charts.
+ *
+ * @param {{ getAggregator: (rowKey: Array, colKey: Array) => { sum: number, format: (value: number, flag: boolean) => string } | null, colKeys: Array<Array> }} pivotData - The pivot data model.
+ * @returns {function(): string} A Highcharts stackLabels formatter function (bound to Highcharts stack context with `this.x` and `this.isNegative`).
+ */
+export function createBarStackLabelsFormatter(pivotData: {
+    getAggregator: (rowKey: any[], colKey: any[]) => {
+        sum: number;
+        format: (value: number, flag: boolean) => string;
+    } | null;
+    colKeys: Array<any[]>;
+}): () => string;

package/src/charts/formatters/stack-labels.formatter.js

@@ -0,0 +1,67 @@
+/**
+ * Creates a Highcharts stackLabels formatter for stacked column charts.
+ * Reads totals from the pivot model via `pivotData.getAggregator` instead of
+ * relying on Highcharts' `this.total`, which can exclude segments too small to render.
+ * Supports `present_total`, `hide_subtotals`, and `show_percentage` label options.
+ *
+ * @param {{ getAggregator: (rowKey: Array, colKey: Array) => { sum: number, format: (value: number, flag: boolean) => string, value: () => number } | null, colKeys: Array<Array> }} pivotData - The pivot data model.
+ * @param {{ label?: { present_total?: boolean, hide_subtotals?: boolean, show_percentage?: boolean } } | null} additionOptions - Chart label options.
+ * @returns {function(): string} A Highcharts stackLabels formatter function (bound to Highcharts stack context with `this.x` and `this.isNegative`).
+ */
+function createStackLabelsFormatter(pivotData, additionOptions) {
+    return function () {
+        const showTotal = additionOptions && additionOptions.label && additionOptions.label.present_total;
+        const hideSubtotals = additionOptions && additionOptions.label && additionOptions.label.hide_subtotals;
+        const showTotalsPercentage = additionOptions && additionOptions.label && additionOptions.label.show_percentage;
+
+        if (!hideSubtotals || showTotal) {
+            const agg = pivotData.getAggregator([], pivotData.colKeys[this.x]);
+
+            if (agg && agg.sum) {
+                const isNeedToDisplayLabel = agg.sum > 0 && !this.isNegative || agg.sum < 0 && this.isNegative;
+
+                if (isNeedToDisplayLabel) {
+                    const subtotalValue = agg.sum;
+                    let percentages = '';
+
+                    if (showTotalsPercentage) {
+                        const aggTotal = pivotData.getAggregator([], []);
+                        const aggTotalValue = aggTotal.value();
+                        percentages = aggTotalValue ? ' (' + Math.round(subtotalValue / aggTotalValue * 100) + '%)' : '';
+                    }
+                    return (showTotal ? agg.format(subtotalValue, true) : '') + percentages;
+                }
+            }
+        }
+        return '';
+    };
+}
+
+/**
+ * Creates a Highcharts stackLabels formatter for stacked bar charts.
+ * Uses `pivotData.getAggregator` for accurate totals instead of Highcharts' `this.total`.
+ * Always displays the formatted total — does not support `present_total`, `hide_subtotals`,
+ * or `show_percentage` options as these are not available for bar stacked charts.
+ *
+ * @param {{ getAggregator: (rowKey: Array, colKey: Array) => { sum: number, format: (value: number, flag: boolean) => string } | null, colKeys: Array<Array> }} pivotData - The pivot data model.
+ * @returns {function(): string} A Highcharts stackLabels formatter function (bound to Highcharts stack context with `this.x` and `this.isNegative`).
+ */
+function createBarStackLabelsFormatter(pivotData) {
+    return function () {
+        const agg = pivotData.getAggregator([], pivotData.colKeys[this.x]);
+
+        if (agg && agg.sum) {
+            const isNeedToDisplayLabel = agg.sum > 0 && !this.isNegative || agg.sum < 0 && this.isNegative;
+
+            if (isNeedToDisplayLabel) {
+                return agg.format(agg.sum, true);
+            }
+        }
+        return '';
+    };
+}
+
+module.exports = {
+    createStackLabelsFormatter,
+    createBarStackLabelsFormatter
+};

package/src/{value.formatter.js → charts/formatters/value.formatter.js}

@@ -8,12 +8,12 @@ function getAggregatorPercentageValueIfRequired(value, render_options, data, row
     const baseRowKey = data && data.rowKeys && data.rowKeys.length ? data.rowKeys[0] : null;
     const currentColKey = colKey ? colKey : [];
     const agg = data && baseRowKey ? data.getAggregator(baseRowKey, currentColKey) : null;
-    
+
     if (isPercentage && isVariance && baseRowKey && agg) {
         if (deltaColumn && isAbsoluteValue(deltaColumn.formula)) {
             value = getRelatedValue(value, agg.value());
         }
-        
+
         return Math.round(value * 100) + '%';
     }
 
@@ -30,7 +30,7 @@ function getRelatedValue(value, baseValue) {
 function isAbsoluteValue(formula) {
     if (!formula)
         return false;
-    
+
     return !lodash.includes(formula.replace(/\s+/g, ''), '/');
 };
 
@@ -38,4 +38,4 @@ module.exports = {
     getAggregatorPercentageValueIfRequired,
     getRelatedValue,
     isAbsoluteValue
-};
+};

package/src/highcharts_renderer.js

@@ -4,7 +4,8 @@ const { DrGaugeChart, GAUGE_OPTIONS_DEFAULT } = require('./charts/dr_gauge_chart
 const { DrDonutChart } = require('./charts/dr_donut_chart');
 const seriesPointStylesHelper = require('./seriesPointStyles-helper');
 const smartQueriesHelper = require('./smart_queries_helper');
-const valueFormatter = require('./value.formatter');
+const valueFormatter = require('./charts/formatters/value.formatter');
+const { createStackLabelsFormatter, createBarStackLabelsFormatter } = require('./charts/formatters/stack-labels.formatter');
 const { DrGaugeCategoriesSummaryChart } = require("./charts/dr_gauge_categories_summary_chart");
 const {
     TooMuchDataError,
@@ -124,7 +125,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
     /**
      * Handles errors that occur during pivot renderer processing.
-     * 
+     *
      * @param {Error} err - The error that occurred during pivot rendering
      * @param {boolean} onlyOptions - If true, logs the error and returns empty options object instead of throwing
      * @param {Error} fallbackError - The fallback error to throw when onlyOptions is false and err is not a BaseRendererError
@@ -2974,7 +2975,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             zoomType: additionOptions && additionOptions.chart && additionOptions.chart.zoom_type ? additionOptions.chart.zoom_type : 'None',
             events: {
                 'drilldown': function (e) {
-                    highchartsRenderer.modifyEventPointForDrilldown(e);
+                    !highchartsRenderer.environment.preventDrilldownEventMutation && highchartsRenderer.modifyEventPointForDrilldown(e);
                     if (drilldownFunc)
                         drilldownFunc(e, this, "drilldown");
 
@@ -3092,7 +3093,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             zoomType: 'x',
             events: {
                 'drilldown': function (e) {
-                    highchartsRenderer.modifyEventPointForDrilldown(e);
+                    !highchartsRenderer.environment.preventDrilldownEventMutation && highchartsRenderer.modifyEventPointForDrilldown(e);
                     if (drilldownFunc)
                         drilldownFunc(e, this, "drilldown");
 
@@ -3117,32 +3118,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             },
             stackLabels: {
                 enabled: additionOptions && additionOptions.label ? additionOptions.label.show : true,
-                formatter: function () {
-                    const showTotal = additionOptions && additionOptions.label && additionOptions.label.present_total;
-                    const hideSubtotals = additionOptions && additionOptions.label && additionOptions.label.hide_subtotals;
-                    const showTotalsPercentage = additionOptions && additionOptions.label && additionOptions.label.show_percentage;
-
-                    if (!hideSubtotals || showTotal) {
-                        const agg = pivotData.getAggregator([], pivotData.colKeys[this.x]);
-
-                        if (agg && agg.sum) {
-                            const isNeedToDisplayLabel = agg.sum > 0 && !this.isNegative || agg.sum < 0 && this.isNegative;
-
-                            if (isNeedToDisplayLabel) {
-                                const subtotalValue = agg.sum;
-                                let percentages = '';
-
-                                if (showTotalsPercentage) {
-                                    const aggTotal = pivotData.getAggregator([], []);
-                                    const aggTotalValue = aggTotal.value();
-                                    percentages = aggTotalValue ? ' (' + Math.round(subtotalValue/aggTotalValue * 100) + '%)' : '';
-                                }
-                                return (showTotal ? agg.format(subtotalValue, true) : '') + percentages;
-                            }
-                        }
-                    }
-                    return '';
-                },
+                formatter: createStackLabelsFormatter(pivotData, additionOptions),
                 style: highchartsRenderer.getDataLabelsStyle(additionOptions),
             },
             labels: {
@@ -3435,21 +3411,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             highchartsRenderer.getDataLabelsStyle(additionOptions)
         );
 
-        const stackLabelsFormatter = function() {
-            return function() {
-                if (this.total) {
-                    var total = parseFloat(this.total);
-                    var agg = pivotData.getAggregator([], []);
-                    if (agg) {
-                        return agg.format(total, true);
-                    } else {
-                        return total.toLocaleString();
-                    }
-                }
-                return '';
-            }
-        }
-
         const dataLabelsFormatter = function() {
             return function() {
                 const deltaColumnName = lodash.get(opts, 'chartOptions.delta_column.name', '');
@@ -3475,7 +3436,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             },
             stackLabels: {
                 enabled: additionOptions && additionOptions.label && !isVarianceOnly ? additionOptions.label.show : false,
-                formatter: stackLabelsFormatter.call(this),
+                formatter: createBarStackLabelsFormatter(pivotData),
                 style: labelStyle
             },
             labels: {
@@ -5895,12 +5856,12 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 if (opt.isUpdatingPointStylesOnClick) {
                     opt.drillDownListFunc = (e) => {
                         seriesPointStylesHelper.setSeriesPointStylesOnClick(e);
-                        highchartsRenderer.modifyEventPointForDrilldown(e);
+                        !highchartsRenderer.environment.preventDrilldownEventMutation && highchartsRenderer.modifyEventPointForDrilldown(e);
                         drillDownListFunc(e);
                     };
                 } else {
                     opt.drillDownListFunc = (e) => {
-                        highchartsRenderer.modifyEventPointForDrilldown(e);
+                        !highchartsRenderer.environment.preventDrilldownEventMutation && highchartsRenderer.modifyEventPointForDrilldown(e);
                         drillDownListFunc(e);
                     };
                 }

package/src/index.d.ts

@@ -75,5 +75,9 @@ export type EnvironmentOptions = {
      * - Allow custom gauge goal title
      */
     enableGaugeDynamicGoal?: boolean | undefined;
+    /**
+     * - Prevents reassignment of point.name & series.name to their initialName during drilldown avoiding conflicts between formatted and unformatted names
+     */
+    preventDrilldownEventMutation?: boolean | undefined;
 };
 export { DataFormatter, options, RendererErrorCodes, BaseRendererError, TooMuchDataError, NoDataError, DataConflictError, GaugeConfigurationError, GenericRenderingError, GenericComputationalError, GraphTableRenderer, FREEZE_PANES_MODES };

package/src/index.js

@@ -23,6 +23,7 @@ const freezePanes = require('./pivot-table/freeze-panes');
  * @property {boolean} [fiscal_year_back] - Fiscal year direction
  * @property {boolean} [enableStackedPercentCharts] - Enable stacked percent charts
  * @property {boolean} [enableGaugeDynamicGoal] - Allow custom gauge goal title
+ * @property {boolean} [preventDrilldownEventMutation] - Prevents reassignment of point.name & series.name to their initialName during drilldown avoiding conflicts between formatted and unformatted names
  */
 
 let dr_render_factory = {};

package/tsconfig.json

@@ -15,6 +15,7 @@
         "./src/index.js",
         "./src/graph-table-renderer.js",
         "./src/errors.js",
+        "./src/charts/formatters/**/*.js",
         "./src/options/**/*.js",
         "./src/pivot-table/freeze-panes/**/*.js"
     ],