@datarailsshared/dr_renderer 1.2.229-dragons → 1.2.231

package/package.json

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

package/src/highcharts_renderer.js

@@ -1,6 +1,5 @@
 const SERIES_CLASSNAMES = {
     WATERFALL_BREAKDOWN: 'waterfallBreakdown',
-    WATERFALL_WALKTHROUGH: 'waterfallWalkthrough',
     TOTAL_SERIES: 'totalSeries',
     TREND_SERIES: 'trendSeries',
 };
@@ -26,7 +25,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     const textColor = "#151a41";
     const chartLabelColor = "#cfd7dd";
     const HIGHCHARTS_FONT_FAMILY = 'Poppins';
-    let firstBarColor = null;
 
     if(!Highcharts){
         Highcharts = {
@@ -84,7 +82,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         KPI_WIDGET: 'kpi-widget',
         TEXT_WIDGET: 'text-widget',
         WATERFALL_BREAKDOWN: 'waterfall-chart-breakdown',
-        WATERFALL_WALKTHROUGH: 'waterfall-chart-walkthrough',
         PUBLISHED_ITEM: 'published_item',
         RICH_TEXT: 'rich_text',
         EXCEL_VIEWER: 'excel_viewer',
@@ -489,7 +486,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     rows = [];
                 }
 
-                var cols = lodash.get(this, 'point.options.colsForTotal') || this.key;
+                var cols = this.key;
                 if (typeof (cols) == 'object' && cols.name) {
                     cols = cols.name;
                 }
@@ -622,7 +619,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         var func = function () {
             const isWaterfallBreakdown = this.series.options.className === SERIES_CLASSNAMES.WATERFALL_BREAKDOWN;
-            const isWaterfallWalkthrough = this.series.options.className === SERIES_CLASSNAMES.WATERFALL_WALKTHROUGH;
+            const isTrendSeries = this.series.options.className === SERIES_CLASSNAMES.TREND_SERIES;
+
             var y = parseFloat(this.y);
             if (pivotData) {
                 let series_name = (this.series.name || '') + "";
@@ -632,11 +630,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 }
                 if (pivotData.rowAttrs.length == 0
                     || this.series.options.className === 'totalSeries'
-                    || this.series.options.className === 'trendSeries') {
+                    || isTrendSeries) {
                     rows = [];
                 }
-
-                var cols = lodash.get(this, 'point.options.colsForTotal') || this.key;
+                var cols = this.key;
                 if (!cols && is_drill_down_pie) {
                     cols = this.name;
                 }
@@ -651,9 +648,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 if (variant_name && rows && rows[0] && variant_name == rows[0]) {
                     rows[0] = variant_name_default_name;
                 }
-                if (isWaterfallWalkthrough) {
-                    cols = [this.key]
-                }
+
                 try {
                     if (is_drill_down_pie && !highchartsRenderer.selfStartsWith(series_name,"Series ")) {
                         let temp = cols;
@@ -661,9 +656,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         rows = temp;
                     }
 
-                    var category_text = `<span style="font-weight: bold;">
-                        ${ lodash.get(this, 'point.options.colsForTotal') ? cols[0] : cols } ${ isWaterfallBreakdown ? ': ' : ' ' }
-                    </span>`;
+                    var category_text = `<span style="font-weight: bold;">${ cols }${ isWaterfallBreakdown ? ': ' : ' ' }</span>`;
                     if (this.category) {
                         category_text = '';
                     }
@@ -672,7 +665,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         series_text += ': '
                     }
 
-                    if (pivotData.rowAttrs.length == 0) {
+                    if (pivotData.rowAttrs.length == 0 && !isTrendSeries) {
                         series_text = ': ';
                     }
 
@@ -686,7 +679,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
                     let formatted_value_to_return = $.pivotUtilities.getFormattedNumber(y, null, opts);
                     if (aggr.value() || isWaterfallBreakdown) {
-                        formatted_value_to_return = $.pivotUtilities.getFormattedNumber(isWaterfallBreakdown ? y : aggr.value(), aggr, opts);
+                        formatted_value_to_return = $.pivotUtilities.getFormattedNumber(
+                            isWaterfallBreakdown || isTrendSeries ? y : aggr.value(), aggr, opts
+                        );
                     }
 
                     let wrappedFormattedValue = highchartsRenderer.getSpanWrapper(formatted_value_to_return);
@@ -1042,7 +1037,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             if (row_n_value && row_n_value.length > 0) {
                 ob.name = row_n_value.join(highchartsRenderer.delimer).replace('DR_Others', othersName);
             }
-
             lodash.forEach(col_n_keys, function (col_n_value, index) {
                 var agg = pivotData.getAggregator(row_n_value, col_n_value);
                 var val = agg.value();
@@ -1093,7 +1087,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
                 const trendSeries = lodash.clone(chart_series[chart_series.length - 1]);
                 trendSeries.className = 'trendSeries';
-                trendSeries.name = 'Trend Line (' + trendSeries.name + ')';
+                trendSeries.name = highchartsRenderer.getTrendSeriesName(trendSeries);
                 trendSeries.dashStyle = 'shortdot';
                 trendSeries.type = 'line';
                 trendSeries.data = trendSeries.data.map((el, index) => a + b * (index + 1));
@@ -1259,10 +1253,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             if (opts.trendLine) {
                 const a = ((ySum * squareXSum) - (xSum * xySum)) / ((n * squareXSum) - (xSum * xSum));
                 const b = ((n * xySum) -  (xSum* ySum)) / ((n * squareXSum) - (xSum * xSum));
-
                 const trendSeries = lodash.clone(chart_series[chart_series.length - 1]);
                 trendSeries.className = 'trendSeries';
-                trendSeries.name = 'Trend Line (' + trendSeries.name + ')';
+                trendSeries.name = highchartsRenderer.getTrendSeriesName(trendSeries);
                 trendSeries.dashStyle = 'shortdot';
                 trendSeries.type = 'line';
                 trendSeries.data = trendSeries.data.map((data, index) => ({name: data.name, y: a + b * (index + 1)}));
@@ -1270,7 +1263,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 if (colors && colors[i]) {
                     trendSeries.color = colors[i];
                 }
-
                 trendSerieses.push(trendSeries);
             }
             i++;
@@ -1287,7 +1279,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }
 
         let weights = { line: 2,spline: 3 ,area:-2, areaspline: -1, scatter:4, column: 1 };
-
         if (opts.comboOptions && lodash.includes(chartType,'combo') && !lodash.isEqual(row_n_keys, EMPTY_ROW_N_KEYS)) {
             chart_series.forEach((series, seriesIndex) => {
                 const savedSeriesOption = lodash.find(opts.comboOptions.seriesOptions, {series: series.name});
@@ -1422,89 +1413,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return chart_series;
     }
 
-    highchartsRenderer.ptCreateWaterfallWalkthroughSeries = function (pivotData, onlyNumbers, additionOptions, opts) {
-        const waterfallOptions = opts.walkthrough_options;
-        const chart_series = [];
-        let resultObject = {
-            data: [],
-            dataLabels: {
-                allowOverlap: additionOptions && additionOptions.label ? additionOptions.label.overlap : false,
-                enabled: additionOptions && additionOptions.label ? additionOptions.label.show : true,
-                formatter: highchartsRenderer.defaultDataLabelFormatter(pivotData, {'chartOptions': additionOptions, total_value_options: opts.total_value_options}),
-                style: highchartsRenderer.getDataLabelsStyle(additionOptions),
-            },
-            upColor: waterfallOptions.colors.increase,
-            color: waterfallOptions.colors.decrease,
-            className: SERIES_CLASSNAMES.WATERFALL_WALKTHROUGH
-        };
-        resultObject = highchartsRenderer.getDataLabelsOptions(additionOptions, resultObject);
-        lodash.forEach(waterfallOptions.values.walkthrough, function(value, index) {
-
-            let keys = [];
-            if (value.trend === 'total') {
-                keys = ['Total'];
-            } else {
-                _.forEach(value.key, (item) => {
-                    const findKeyByValue = Object.keys(pivotData.dateValuesDictionary || {}).find(key => pivotData.dateValuesDictionary[key] === item);
-                    keys.push(findKeyByValue ? findKeyByValue : item);
-                 })
-            }
-
-            const agg = pivotData.getAggregator([], keys);
-            let val = agg.value();
-
-            if (val != null && $.isNumeric(val)) {
-                val = parseFloat(val);
-            } else if (onlyNumbers) {
-                val = NaN;
-            } else {
-                val = 0;
-            }
-
-            if (value.trend === 'decrease') {
-                val = val * -1;
-            }
-
-            const name = value.trend === 'total' ? value.formattedKey || value.key[0] : keys.join(highchartsRenderer.delimer);
-            let color = '';
-            if (value.trend !== 'total') {
-                if (index === 0 && !firstBarColor) {
-                    color = waterfallOptions.colors.total;
-                    firstBarColor = waterfallOptions.colors.total;
-                } else {
-                    color = value.color
-                }
-            } else {
-                color = waterfallOptions.colors.total;
-            }
-
-            resultObject.data.push({
-                y: val,
-                name: lodash.unescape(name).replace('DR_Others', highchartsRenderer.getOthersName(opts)),
-                isSum: value.trend === 'total',
-                isTotal: value.trend === 'total',
-                color,
-                colsForTotal: value.trend === 'total' ? keys : null,
-            });
-        });
-        chart_series.push(resultObject);
-        chart_series.push(
-            {
-                name: 'Positive',
-                visible: false,
-                color: waterfallOptions.colors.increase
-            });
-
-        chart_series.push(
-            {
-                name: 'Negative',
-                visible: false,
-                color: waterfallOptions.colors.decrease
-            });
-
-        return chart_series;
-    }
-
     highchartsRenderer.setChartTypeBySeriesType = function (type, series) {
         const types = {
             'line-chart': 'line',
@@ -3363,121 +3271,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
-    highchartsRenderer.ptRenderWaterfallWalkthrough = function (pivotData, opts) {
-        let chartOptions = {};
-        const waterfallOptions = opts?.walkthrough_options;
-        const additionOptions = opts.chartOptions
-            ? opts.chartOptions
-            : highchartsRenderer.getDefaultValueForChart(highchartsRenderer.CHART_TYPES.WATERFALL_WALKTHROUGH);
-
-        chartOptions.chart = {
-            type: 'waterfall',
-            zoomType: additionOptions && additionOptions.chart && additionOptions.chart.zoom_type ? additionOptions.chart.zoom_type : 'None',
-        };
-        if (disableAnimation) {
-            chartOptions.chart.animation = false;
-        }
-
-        chartOptions.xAxis = {
-            type: 'category',
-            crosshair: true,
-            min: 0,
-            title: {
-                text : additionOptions && additionOptions.axisX ? additionOptions.axisX.name : '',
-            },
-            uniqueNames: false,
-        };
-
-        highchartsRenderer.setTitleAndSubTitle(chartOptions, opts, additionOptions);
-
-        chartOptions.yAxis = {
-            min: null,
-            max: null,
-            title: {
-                text: additionOptions && additionOptions.axisY ? additionOptions.axisY.name : '',
-                autoylabel: additionOptions && additionOptions.axisY ? additionOptions.axisY.autoylabel : ''
-            },
-            labels: {
-                formatter: highchartsRenderer.defaultValueLabelsFormatter(pivotData, opts)
-            },
-        };
-        if (additionOptions) {
-            highchartsRenderer.setYAxisMinMax(chartOptions.yAxis, additionOptions.axisY);
-        }
-
-        chartOptions.tooltip = {
-            formatter: highchartsRenderer.defaultFormatterToTooltip(pivotData, opts),
-            valueDecimals: 2,
-        };
-
-        highchartsRenderer.handleGridLines(additionOptions, chartOptions);
-
-        if (lodash.get(opts, 'paletteOptions.widgetPalette', null)) {
-            const mc_palette = lodash.find(lodash.get(opts.paletteOptions, 'monochromePalettes', []), { selected: true });
-            chartOptions.colors = mc_palette ? mc_palette.colors : opts.paletteOptions.widgetPalette;
-        } else if (lodash.get(opts, 'paletteOptions.dashboardPalette.colors', null)) {
-            chartOptions.colors = opts.paletteOptions.dashboardPalette.colors;
-        }
-        chartOptions.series = highchartsRenderer
-            .ptCreateWaterfallWalkthroughSeries(pivotData, null, additionOptions, opts);
-
-        chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
-        chartOptions.plotOptions = {
-            waterfall: {
-                pointPadding: 0.2,
-                borderWidth: 0,
-                borderRadius: 1,
-                lineWidth: 0,
-            },
-            series: {
-                animation: !disableAnimation,
-                cropThreshold: 1000,
-                dataLabels: {
-                    allowOverlap: additionOptions && additionOptions.label ? additionOptions.label.overlap : false,
-                    enabled: additionOptions && additionOptions.label ? additionOptions.label.show : true,
-                    formatter: highchartsRenderer.defaultDataLabelFormatter(pivotData, opts),
-                    style: highchartsRenderer.getDataLabelsStyle(additionOptions),
-                    inside: false
-                },
-                events: {
-                    legendItemClick: () => {
-                        return false;
-                    }
-                }
-            }
-        };
-
-        if (opts.drillDownListFunc) {
-            chartOptions.plotOptions.series.cursor = 'pointer';
-            chartOptions.plotOptions.series.point = {
-                events: {
-                    click: opts.drillDownListFunc
-                }
-            };
-        }
-        if (waterfallOptions.colors) {
-            chartOptions.legend = highchartsRenderer.getOptionsForLegends(additionOptions, 3, false);
-            chartOptions.legend.useHTML = true;
-            chartOptions.legend.labelFormatter = function() {
-                const name = this.options.className ? 'Total': this.name;
-                const findTotal = _.find(this.options.data, {isTotal: true});
-                const color = findTotal?.color ? findTotal.color : this.color;
-                return '<span style="margin: 5px; vertical-align: middle; display:inline-block; background-color: '+ color + '; width: 12px; height: 12px; border-radius: 50%"></span><span style="color: #000; display: inline-block; margin: 5px; vertical-align: middle;">' + name + '</span>';
-            }
-
-            chartOptions.legend.symbolPadding = 0;
-            chartOptions.legend.symbolWidth = 0;
-            chartOptions.legend.symbolHeight = 0;
-            chartOptions.legend.squareSymbol = false;
-        } else {
-            chartOptions.legend = {
-                enabled: false
-            }
-        }
-
-        return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
-    }
-
     highchartsRenderer.formatFieldValue = function (field, value) {
         let currentType = '';
         let format = field.format;
@@ -4546,17 +4339,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }
     };
 
-    highchartsRenderer.waterfallConstants = {
-        [highchartsRenderer.CHART_TYPES.WATERFALL_BREAKDOWN]: {
-            minCategoriesCount: 2,
-            maxCategoriesCount: 5,
-        },
-        [highchartsRenderer.CHART_TYPES.WATERFALL_WALKTHROUGH]: {
-            minCategoriesCount: 2,
-            maxCategoriesCount: 10,
-        }
-    };
-
     highchartsRenderer.rhPivotView = function (rowData, options, isTable = false, widget = null) {
         if (!rowData || !rowData) {
             if (options.onlyOptions) {
@@ -4565,15 +4347,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             return null;
         }
 
-        const isWaterfall = widget
-            && (
-                widget.chart_type === highchartsRenderer.CHART_TYPES.WATERFALL_BREAKDOWN
-                || widget.chart_type === highchartsRenderer.CHART_TYPES.WATERFALL_WALKTHROUGH
-            );
-
-        if (isWaterfall) {
-            const maxCategories = highchartsRenderer.waterfallConstants[widget.chart_type].maxCategoriesCount;
-            const minCategories = highchartsRenderer.waterfallConstants[widget.chart_type].minCategoriesCount;
+        if (widget && widget.chart_type === highchartsRenderer.CHART_TYPES.WATERFALL_BREAKDOWN) {
+            const breakdownSettings = widget.options.breakdown_options.settings;
+            const maxCategories = breakdownSettings.maxCategoriesCount;
+            const minCategories = breakdownSettings.minCategoriesCount;
             const uniqueCategories = lodash.filter(
                 lodash.uniq(
                     lodash.map(rowData, row => row[widget.cols[0].name])
@@ -4583,8 +4360,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
             if (uniqueCategories && (uniqueCategories.length > maxCategories || uniqueCategories.length < minCategories )) {
                 options.error_has_occurred = true;
-                const isDateField = widget.cols[0].type === 'Date';
-                const commonMessagePart = `This chart support a selection of ${minCategories}-${maxCategories} items from the category section. `;
                 options.error_params = {
                     title: 'Data Conflict',
                     text: `Please adjust your dashboard's reference date and filter selections as \
@@ -4833,25 +4608,19 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return highchartsRenderer.getWeekNumber(dateObj);
     };
 
-    highchartsRenderer.check_values_not_for_convert = function (currentgraph, field_name) {
-        let vals_not_convert = [];
+    highchartsRenderer.check_value_not_for_convert = function (currentgraph, field_name) {
+        let val_not_convert = null;
         if (lodash.has(currentgraph, "options.chartOptions.delta_column") && currentgraph.options.chartOptions.delta_column) {
             let delta_options = currentgraph.options.chartOptions.delta_column;
             if (delta_options.field == 'series' && currentgraph.rows && currentgraph.rows[0] &&
                 currentgraph.rows[0].name == field_name) {
-                vals_not_convert = [delta_options.name];
+                val_not_convert = delta_options.name;
             } else if (delta_options.field == 'category' && currentgraph.rows && currentgraph.cols[0] &&
                 currentgraph.cols[0].name == field_name) {
-                vals_not_convert = [delta_options.name];
+                val_not_convert = delta_options.name;
             }
-        } else if (currentgraph.chart_type === highchartsRenderer.CHART_TYPES.WATERFALL_WALKTHROUGH) {
-            lodash.forEach(currentgraph.options.walkthrough_options.values.walkthrough, value => {
-                if (value.trend === 'total') {
-                    vals_not_convert.push(value.key[0]);
-                }
-            });
         }
-        return vals_not_convert;
+        return val_not_convert;
     };
 
     highchartsRenderer.updateFiltersShowNames = function (filters) {
@@ -4871,8 +4640,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         })
     };
 
-    highchartsRenderer.returnRawDataValue = function (type, value, format, field_name, vals_not_for_convert) {
-        if (vals_not_for_convert && vals_not_for_convert.length && lodash.includes(vals_not_for_convert, value)) {
+    highchartsRenderer.returnRawDataValue = function (type, value, format, field_name, val_not_for_convert) {
+        if (val_not_for_convert && val_not_for_convert == value) {
             return value;
         }
 
@@ -6980,16 +6749,16 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 value_name: 'name',
                 element_label: 'Name',
                 default_value: '_Variance'
-            }, {
-              element_type: 'input',
-              value_name: 'formula',
-              element_label: 'Formula',
-              default_value: 'x2-x1'
             }, {
                 element_type: 'input',
-                value_name: 'color',
-                element_label: 'Color',
-                default_value: ''
+                value_name: 'formula',
+                element_label: 'Formula',
+                default_value: 'x2-x1'
+            }, {
+              element_type: 'input',
+              value_name: 'color',
+              element_label: 'Color',
+              default_value: ''
             }, {
                 element_type: 'radio',
                 value_name: 'chart',
@@ -7113,16 +6882,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             legendTooltipTitle: 'Drag one field to further configure your x-axis.',
             legendTooltipDescription: 'The breakdown subdivides the chart by a category field for further analysis of what’s contributing to the increase or decrease.',
         },
-        [highchartsRenderer.CHART_TYPES.WATERFALL_WALKTHROUGH]: {
-            name: 'Waterfall Walkthrough Chart ',
-            label: 'Waterfall Walkthrough Chart ',
-            title: 'TODO: add text',
-            description: 'TODO: add text',
-            axisName: 'Category',
-            startedMessage: 'TODO: add text',
-            axisTooltipTitle: 'TODO: add text',
-            legendTooltipTitle: 'TODO: add text',
-        },
         'combo-chart': {
             name: 'Combo Chart ',
             label: 'Combo Chart ',
@@ -7778,24 +7537,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                             highchartsRenderer.suboptions["legends"],
                         ]
                     },
-                    {
-                        type: highchartsRenderer.CHART_TYPES.WATERFALL_WALKTHROUGH,
-                        name:  highchartsRenderer.chartsTypesInfo[highchartsRenderer.CHART_TYPES.WATERFALL_WALKTHROUGH].name,
-                        class: 'google-visualization-charteditor-thumbs-columnchart',
-                        render: highchartsRenderer.ptRenderWaterfallWalkthrough,
-                        suboptions: [
-                            highchartsRenderer.suboptions["axisX"],
-                            highchartsRenderer.suboptions["tooltips"],
-                            highchartsRenderer.suboptions["label"],
-                            highchartsRenderer.suboptions["subtitle"],
-                            highchartsRenderer.suboptions["widget_library"],
-                            highchartsRenderer.suboptions["chart"],
-                            highchartsRenderer.suboptions["negative_number_format"],
-                            highchartsRenderer.suboptions["advanced"],
-                            highchartsRenderer.suboptions["legends"],
-                        ],
-                        hidden: true,
-                    },
                 ]
             },
         ];
@@ -8540,7 +8281,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         var data = res;
 
         lodash.forEach(datesFields, function (row) {
-            row.val_not_convert = highchartsRenderer.check_values_not_for_convert(widget, row.name);
+            row.val_not_convert = highchartsRenderer.check_value_not_for_convert(widget, row.name);
         });
 
         if (datesFields.length > 0) {
@@ -8946,14 +8687,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
            return rightPosition;
          case 'none':
             return none;
-         }
-       } else if (isLine) {
-         return useNewUx ? leftPosition : rightPosition;
-       } else if (isPie) {
-           return useNewUx ? rightPosition : topPosition;
        }
+     } else if (isLine) {
+       return useNewUx ? leftPosition : rightPosition;
+     } else if (isPie) {
+         return useNewUx ? rightPosition : topPosition;
+     }
 
-        return useNewUx ? topPosition : bottomPosition;
+     return useNewUx ? topPosition : bottomPosition;
     }
 
     highchartsRenderer.setYAxisMinMax = function (yAxis, axisYOptions) {
@@ -9018,6 +8759,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }
     }
 
+    highchartsRenderer.getTrendSeriesName = function(series) {
+        return series.name ? 'Trend Line (' + series.name + ')' : 'Trend Line';
+    }
+
     return highchartsRenderer;
 };