@datarailsshared/dr_renderer 1.2.236 → 1.2.237

package/package.json

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

package/src/highcharts_renderer.js

@@ -1,5 +1,6 @@
 const SERIES_CLASSNAMES = {
     WATERFALL_BREAKDOWN: 'waterfallBreakdown',
+    WATERFALL_WALKTHROUGH: 'waterfallWalkthrough',
     TOTAL_SERIES: 'totalSeries',
     TREND_SERIES: 'trendSeries',
 };
@@ -82,6 +83,7 @@ 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',
@@ -486,7 +488,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     rows = [];
                 }
 
-                var cols = this.key;
+                var cols = lodash.get(this, 'point.options.colsForTotal') || this.key;
                 if (typeof (cols) == 'object' && cols.name) {
                     cols = cols.name;
                 }
@@ -619,6 +621,7 @@ 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);
@@ -633,7 +636,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     || isTrendSeries) {
                     rows = [];
                 }
-                var cols = this.key;
+
+                var cols = lodash.get(this, 'point.options.colsForTotal') || this.key;
                 if (!cols && is_drill_down_pie) {
                     cols = this.name;
                 }
@@ -648,7 +652,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 if (variant_name && rows && rows[0] && variant_name == rows[0]) {
                     rows[0] = variant_name_default_name;
                 }
-
                 try {
                     if (is_drill_down_pie && !highchartsRenderer.selfStartsWith(series_name,"Series ")) {
                         let temp = cols;
@@ -656,7 +659,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         rows = temp;
                     }
 
-                    var category_text = `<span style="font-weight: bold;">${ cols }${ isWaterfallBreakdown ? ': ' : ' ' }</span>`;
+                    var category_text = `<span style="font-weight: bold;">
+                        ${ lodash.get(this, 'point.options.colsForTotal') ? isWaterfallWalkthrough ? this.key : cols[0] : cols } ${ isWaterfallBreakdown ? ': ' : ' ' }
+                    </span>`;
                     if (this.category) {
                         category_text = '';
                     }
@@ -680,7 +685,7 @@ 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 || isTrendSeries ? y : aggr.value(), aggr, opts
+                            isWaterfallBreakdown || isWaterfallWalkthrough || isTrendSeries ? y : aggr.value(), aggr, opts
                         );
                     }
 
@@ -1413,6 +1418,86 @@ 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.color) {
+                color = value.color;
+            } else {
+                if (value.trend === 'total') color = waterfallOptions.colors.total;
+                if (value.trend === 'decrease') color = waterfallOptions.colors.decrease;
+                if (value.trend === 'increase') color = waterfallOptions.colors.increase;
+            }
+
+            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',
@@ -3271,6 +3356,121 @@ 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;
@@ -4339,6 +4539,17 @@ 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) {
@@ -4347,16 +4558,28 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             return null;
         }
 
-        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])
-                ),
-                value => !!value
-            );
+        const isWalktrough = lodash.get(widget, 'chart_type') === highchartsRenderer.CHART_TYPES.WATERFALL_WALKTHROUGH;
+        const isBreakdown = lodash.get(widget, 'chart_type')=== highchartsRenderer.CHART_TYPES.WATERFALL_BREAKDOWN;
+        const isWaterfall = isWalktrough || isBreakdown;
+
+        if (isWaterfall) {
+            const maxCategories = highchartsRenderer.waterfallConstants[widget.chart_type].maxCategoriesCount;
+            const minCategories = highchartsRenderer.waterfallConstants[widget.chart_type].minCategoriesCount;
+            let uniqueCategories = [];
+
+            if (isBreakdown) {
+                uniqueCategories = lodash.filter(
+                    lodash.uniq(
+                        lodash.map(rowData, row => row[widget.cols[0].name])
+                    ),
+                    value => !!value
+                );
+            } else {
+                uniqueCategories = lodash.filter(
+                    lodash.get(widget, 'options.walkthrough_options.values.walkthrough'),
+                    (category) => category.trend !== 'total'
+                );
+            }
 
             if (uniqueCategories && (uniqueCategories.length > maxCategories || uniqueCategories.length < minCategories )) {
                 options.error_has_occurred = true;
@@ -4608,19 +4831,25 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return highchartsRenderer.getWeekNumber(dateObj);
     };
 
-    highchartsRenderer.check_value_not_for_convert = function (currentgraph, field_name) {
-        let val_not_convert = null;
+    highchartsRenderer.check_values_not_for_convert = function (currentgraph, field_name) {
+        let vals_not_convert = [];
         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) {
-                val_not_convert = delta_options.name;
+                vals_not_convert = [delta_options.name];
             } else if (delta_options.field == 'category' && currentgraph.rows && currentgraph.cols[0] &&
                 currentgraph.cols[0].name == field_name) {
-                val_not_convert = delta_options.name;
+                vals_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 val_not_convert;
+        return vals_not_convert;
     };
 
     highchartsRenderer.updateFiltersShowNames = function (filters) {
@@ -4640,8 +4869,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         })
     };
 
-    highchartsRenderer.returnRawDataValue = function (type, value, format, field_name, val_not_for_convert) {
-        if (val_not_for_convert && val_not_for_convert == value) {
+    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)) {
             return value;
         }
 
@@ -5100,34 +5329,104 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
     highchartsRenderer.addTemplateDataToCalcModel = function (selectedTemplate, calcModelOptions) {
         highchartsRenderer.setWidgetFieldsToTemplate(selectedTemplate);
-
-        const scenarioName = 'scenario';
         const fields = highchartsRenderer.objectCopyJsonMethod(selectedTemplate.fields);
-        const fieldScenarioAlias = _.find(fields, field => (field.alias || '').toLowerCase() === scenarioName)
-        const fieldScenario = _.find(fields, field => (field.name || '').toLowerCase() === scenarioName)
-        const filters = calcModelOptions.config && calcModelOptions.config.filters;
 
-        const filterFields = [];
-        const valueFields = [];
-        const dateFields = [];
-        const dataTypeFields = [];
-        const dataSeriesFields = [];
-
-        let scenarioField = lodash.get(calcModelOptions, 'config.scenario', undefined) || fieldScenarioAlias || fieldScenario;
-        let fieldOb;
-
-        const fillData = (fieldsArr, destinationArr) => {
+        const fillData = (fieldsArr, ignoreFieldsIdToRemove = []) => {
+            const destinationArr = [];
             lodash.forEach(fieldsArr, function (valObj) {
-                fieldOb = lodash.find(fields, { id: valObj.id });
+                const fieldOb = lodash.find(fields, { id: valObj.id });
                 if (fieldOb) {
                     destinationArr.push(fieldOb);
-                    lodash.remove(fields, { id: fieldOb.id });
+                    !lodash.includes(ignoreFieldsIdToRemove, fieldOb.id) && lodash.remove(fields, { id: fieldOb.id });
                 }
             });
+
+            return destinationArr;
         }
 
+        const canAssignPredefinedField = (() => {
+            const assignedFields = {};
+
+            return function (predefinedData, type, field, bindValue, oppositeValue) {
+                if (!assignedFields[type]) {
+                    assignedFields[type] = [];
+                }
+
+                const isFieldMatch = predefinedData.regex.test(field[bindValue] || '');
+
+                const isFieldTypeCorrect = predefinedData.allowedFieldTypes
+                    ? lodash.includes(predefinedData.allowedFieldTypes, field.type) : true;
+
+                const isFieldAssigned = assignedFields[type].includes(field[bindValue].toLowerCase())
+                    || assignedFields[type].includes(field[oppositeValue].toLowerCase());
+
+                if (!(isFieldMatch && isFieldTypeCorrect)) return false;
+
+                const loweredFieldValue = field[bindValue].toLowerCase();
+                assignedFields[type].push(loweredFieldValue, loweredFieldValue.replaceAll('_', ' '));
+
+                return !isFieldAssigned;
+            }
+        })();
+
+        const reportingMonthRegex = /reporting[_\s]month/i;
+
+        const predefinedField = {
+            value: {
+                regex: /posting[_\s]amount/i,
+                allowedFieldTypes: ['Float', 'Integer'],
+                fields: [],
+            },
+            dataType: {
+                regex: /data[_\s]type[_\s]by/i,
+                allowedFieldTypes: ['Text'],
+                fields: [],
+            },
+            date: {
+                regex: reportingMonthRegex,
+                allowedFieldTypes: ['Date'],
+                fields: [],
+            },
+            filters: {
+                isMultipleFields: true,
+                regex: /^(scenario|DR_ACC_L0)$/i,
+                fields: [],
+            },
+            dataSeries: {
+                isMultipleFields: true,
+                regex: /^(scenario|account[_\s]full|entity|intercompany|posting[_\s]currency|reporting[_\s]currency|report[_\s]field|USER_TO_DR_ACC_KEY|USER_TO_DR_KPI_KEY)$/i,
+                fields: [],
+            },
+        };
+
+        if (!lodash.get(calcModelOptions, 'config', false)) {
+            /**
+             * alias stronger than name (order in array is important)
+             * Firstly we try to get predefined field by aliases and then fill in by names
+             * */
+            const fieldsDataQueueConfig = [
+                { value: 'alias', opposite: 'name' },
+                { value: 'name', opposite: 'alias' }
+            ];
+
+            for (const key in predefinedField) {
+                lodash.forEach(fieldsDataQueueConfig, ({value, opposite}) => {
+                    const ignoredFields = predefinedField[key].ignoreAssignedFields;
+                    const result = predefinedField[key].isMultipleFields
+                        ? lodash.filter(fields, field => canAssignPredefinedField(predefinedField[key], key, field, value, opposite, ignoredFields))
+                        : [lodash.find(fields, field => canAssignPredefinedField(predefinedField[key], key, field, value, opposite, ignoredFields))].filter(f => !!f);
+
+                    if (result && result.length) {
+                        predefinedField[key].fields.push(...result);
+                    }
+                });
+            }
+        }
+
+        const filters = lodash.get(calcModelOptions, 'config.filters', predefinedField.filters.fields);
+
         lodash.forEach(filters, function (filterObj) {
-            fieldOb = lodash.find(fields, { id: filterObj.id });
+            const fieldOb = lodash.find(fields, { id: filterObj.id });
             if (!fieldOb) return;
 
             filterObj.values = filterObj.values && lodash.map(filterObj.values, highchartsRenderer.decodeFunc);
@@ -5145,22 +5444,32 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         });
 
-        const storedGroupByFields = lodash.get(calcModelOptions, 'config.group_by', []);
-        const storedDateFields = [lodash.get(calcModelOptions, 'config.date_field', undefined)].filter(f => !!f);
-        const storedAggFields = [lodash.get(calcModelOptions, 'config.agg_field', undefined)].filter(f => !!f);
-        const storedDataTypeFields = [lodash.get(calcModelOptions, 'config.data_type_field', undefined)].filter(f => !!f);
-
-        fillData(storedGroupByFields, dataSeriesFields);
-        fillData(storedDateFields, dateFields);
-        fillData(storedAggFields, valueFields);
-        fillData(storedDataTypeFields, dataTypeFields);
-        fillData(filters, filterFields);
+        const storedGroupByFields = lodash.get(calcModelOptions, 'config.group_by', predefinedField.dataSeries.fields);
+        const storedDateFields = [lodash.get(calcModelOptions, 'config.date_field', predefinedField.date.fields[0])].filter(f => !!f);
+        const storedAggFields = [lodash.get(calcModelOptions, 'config.agg_field', predefinedField.value.fields[0])].filter(f => !!f);
+        const storedDataTypeFields = [lodash.get(calcModelOptions, 'config.data_type_field', predefinedField.dataType.fields[0])].filter(f => !!f);
+        const scenarioField = lodash.get(calcModelOptions, 'config.scenario', lodash.find(predefinedField.filters.fields, filter => [filter.name, filter.alias].includes('scenario')));
+        const reportingMonthFieldWithAlias = lodash.find(fields, _field => reportingMonthRegex.test(_field.alias));
+        const reportingMonthFieldWithName = lodash.find(fields, _field => reportingMonthRegex.test(_field.name));
+
+        /**
+         * We can have several common fields, so we should ignore deleting during fillData
+         * */
+        const commonFieldsId = [scenarioField && scenarioField.id];
+        const filterFields = fillData(filters, commonFieldsId);
+        const valueFields = fillData(storedAggFields, commonFieldsId);
+        const dateFields = fillData(storedDateFields, commonFieldsId);
+        const dataTypeFields = fillData(storedDataTypeFields, commonFieldsId);
+        const dataSeriesFields = fillData(storedGroupByFields, commonFieldsId);
+
+        lodash.remove(fields, _field => lodash.includes(commonFieldsId, _field.id));
 
         calcModelOptions.pivot = {
             fieldsArray: fields,
             selectedFieldsArray: dataSeriesFields,
             filtersArray: filterFields,
             scenarioField,
+            reportingMonthField: reportingMonthFieldWithAlias || reportingMonthFieldWithName,
             dateFields,
             dataTypeFields,
             valueFields
@@ -6749,16 +7058,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',
@@ -6882,6 +7191,16 @@ 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 ',
@@ -7537,6 +7856,24 @@ 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,
+                    },
                 ]
             },
         ];
@@ -8281,7 +8618,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         var data = res;
 
         lodash.forEach(datesFields, function (row) {
-            row.val_not_convert = highchartsRenderer.check_value_not_for_convert(widget, row.name);
+            row.val_not_convert = highchartsRenderer.check_values_not_for_convert(widget, row.name);
         });
 
         if (datesFields.length > 0) {
@@ -8687,14 +9024,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) {