@datarailsshared/dr_renderer 1.2.213-rocket → 1.2.215-dragons

package/package.json

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

package/src/dr_pivottable.js

@@ -2421,8 +2421,14 @@ let initDRPivotTable = function($, window, document) {
             if (colAttrs.length > 0 && colKeys.length > 0) {
                 colHeaders = processKeys(colKeys, "pvtColLabel", 'cols', colAttrs);
             }
-            var tableClasses = useNewUx && opts.chartOptions.table_options.use_new_table_design ? 'pvtTable newPvtTable' : 'pvtTable';
-            result = createElement("table", tableClasses , null, {
+            var tableClasses = ['pvtTable'];
+            if (opts.chartOptions.table_options.use_new_table_design) {
+                tableClasses.push('newPvtTable');
+            }
+            if (!pivotData.aggregator().uniq) {
+                tableClasses.push('numbers-to-right');
+            }
+            result = createElement("table", tableClasses.join(' ') , null, {
                 style: "display: none;"
             });
 

package/src/highcharts_renderer.js

@@ -1,5 +1,6 @@
 const SERIES_CLASSNAMES = {
     WATERFALL_BREAKDOWN: 'waterfallBreakdown',
+    WATERFALL_WALKTHROUGH: 'waterfallWalkthrough',
     TOTAL_SERIES: 'totalSeries',
     TREND_SERIES: 'trendSeries',
 };
@@ -25,6 +26,7 @@ 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 = {
@@ -82,11 +84,16 @@ 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',
     };
 
+    highchartsRenderer.VIRTUAL_FIELDS = {
+        WATERFALL_VARIANCE: 'DR_WATERFALL_BREAKDOWN_VARIANCE',
+    };
+
     highchartsRenderer.highcharts_theme = {
         "colors": highchartsRenderer.defaults_colors,
         "chart": {
@@ -462,7 +469,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             highchartsRenderer.getOthersName(opts) :
             undefined;
         var drOthersInColumn = lodash.find(
-            pivotData.getColKeys(), 
+            pivotData.getColKeys(),
             keys => keys.length && (lodash.includes(keys, 'DR_Others') || lodash.includes(keys, othersName))
         );
 
@@ -482,7 +489,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;
                 }
@@ -490,7 +497,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 if (!cols && is_drill_down_pie) {
                     cols = this.point.name;
                 }
-                
+
                 if (drOthersInColumn) {
                     if (!lodash.isArray(cols) && othersName === cols) {
                         cols = ['DR_Others'];
@@ -628,7 +635,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     || this.series.options.className === 'trendSeries') {
                     rows = [];
                 }
-                var cols = this.key;
+
+                var cols = lodash.get(this, 'point.options.colsForTotal') || this.key;
                 if (!cols && is_drill_down_pie) {
                     cols = this.name;
                 }
@@ -651,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') ? cols[0] : cols } ${ isWaterfallBreakdown ? ': ' : ' ' }
+                    </span>`;
                     if (this.category) {
                         category_text = '';
                     }
@@ -668,7 +678,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         const modifiedRowsAndCols = highchartsRenderer.transformRowsAndColsForBreakdown(rows, cols, this.point, opts);
                         rows = modifiedRowsAndCols.rows;
                         cols = modifiedRowsAndCols.cols;
-                    }    
+                    }
 
                     var aggr = pivotData.getAggregator(rows, cols);
 
@@ -1339,15 +1349,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return chart_series;
     }
 
-    highchartsRenderer.ptCreateWaterfallBreakdownSeries = function (pivotData, onlyNumbers, additionOptions, opts) {
+    highchartsRenderer.ptCreateWaterfallBreakdownSeries = function (pivotData, additionOptions, opts) {
         const colorOptions = opts.breakdown_options.colors;
-        var chart_series = [],
-            row_n_keys = pivotData.getRowKeys(),
-            col_n_keys = pivotData.getColKeys();
-
-        if (row_n_keys.length === 0) {
-            row_n_keys.push([]);
-        }
+        const chart_series = [];
+        const row_n_keys = pivotData.getRowKeys();
+        const col_n_keys = pivotData.getColKeys();
 
         let resultObject = {
             data: [],
@@ -1363,60 +1369,47 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         };
         resultObject = highchartsRenderer.getDataLabelsOptions(additionOptions, resultObject);
 
-        const breakdownValues = [];
         lodash.forEach(col_n_keys, function(col_n_value, col_index) {
-            breakdownValues.push([]);
-            lodash.forEach(row_n_keys, function (row_n_value, row_index) {
-                var agg = pivotData.getAggregator(row_n_value, col_n_value);
-                var val = agg.value();
-
-                if (val != null && $.isNumeric(val)) {
-                    val = parseFloat(val);
-                } else if (onlyNumbers) {
-                    val = NaN;
-                } else {
-                    val = 0;
-                }
 
-                breakdownValues[col_index][row_index] = val;
+            const totalColumnValue = pivotData.getAggregator([], col_n_value).value();
+            resultObject.data.push({
+                y: totalColumnValue,
+                name: lodash.unescape(col_n_value).replace('DR_Others', highchartsRenderer.getOthersName(opts)),
+                isSum: !!col_index,
+                isTotal: true,
+                color: colorOptions.total,
+            });
 
-                if (col_index) {
-                    const value = val - breakdownValues[col_index - 1][row_index];
+            if (col_index !== col_n_keys.length - 1) {
+                lodash.forEach(row_n_keys, function (row_n_value) {
+                    const agg = pivotData.getAggregator(row_n_value, col_n_value);
+                    let val = agg.value();
 
-                    if (value) {
-                        var tmoobj = {};
-                        var key = row_n_value;
-                        if (lodash.isArray(row_n_value)) {
-                            key = row_n_value[0];
-                        }
+                    val = $.isNumeric(val) ? parseFloat(val) : 0;
+                    if (val) {
+                        const tmoobj = {};
+                        const key = lodash.isArray(row_n_value) ? row_n_value[0] : row_n_value;
                         tmoobj.name = lodash.unescape(key);
-        
+
                         if (tmoobj.name) {
                             tmoobj.name = tmoobj.name.replace('DR_Others', highchartsRenderer.getOthersName(opts));
                         }
-        
+
                         if (lodash.isEmpty(String(tmoobj.name))) {
                             tmoobj.name = lodash.unescape(col_n_value);
                             tmoobj.visible = false;
                         }
-                        tmoobj.y = value;
+
+                        tmoobj.y = val;
                         tmoobj.colKeys = [lodash.unescape(col_n_keys[col_index - 1]), lodash.unescape(col_n_value)];
                         resultObject.data.push(tmoobj);
                     }
-                }
-            });
 
-            resultObject.data.push({
-                y: pivotData.colTotals[col_n_value].sum,
-                name: lodash.unescape(col_n_value).replace('DR_Others', highchartsRenderer.getOthersName(opts)),
-                isSum: !!col_index,
-                isTotal: true,
-                color: colorOptions.total,
-            });
+                });
+            }
         });
 
         chart_series.push(resultObject);
-
         opts.chart_series = [];
         if (!lodash.isEqual(row_n_keys, EMPTY_ROW_N_KEYS)) {
             chart_series.forEach(series => {
@@ -1427,6 +1420,85 @@ 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;
+            }
+
+            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: 'Increase',
+                visible: false,
+                color: waterfallOptions.colors.increase
+            });
+
+        chart_series.push(
+            {
+                name: 'Decrease',
+                visible: false,
+                color: waterfallOptions.colors.decrease
+            });
+
+        return chart_series;
+    }
+
     highchartsRenderer.setChartTypeBySeriesType = function (type, series) {
         const types = {
             'line-chart': 'line',
@@ -1630,7 +1702,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     highchartsRenderer.getDataLabelsStylesForDrillDown = function(additionOptions) {
         let result = highchartsRenderer.getDataLabelsOptions(additionOptions, { dataLabels: {} });
 
-        if (!result.dataLabels) return {}; 
+        if (!result.dataLabels) return {};
         return {
             activeDataLabelStyle: {
                 color: result.dataLabels.color,
@@ -3186,10 +3258,12 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
     highchartsRenderer.ptRenderWaterfallBreakdown = function (pivotData, opts, drilldownFunc, chartType) {
         let chartOptions = {};
-        const additionOptions = opts.chartOptions 
+        const additionOptions = opts.chartOptions
             ? opts.chartOptions
             : highchartsRenderer.getDefaultValueForChart(highchartsRenderer.CHART_TYPES.WATERFALL_BREAKDOWN);
 
+        pivotData.colKeys = lodash.map(lodash.keys(pivotData.colTotals), key => [key]);
+
         chartOptions.chart = {
             type: 'waterfall',
             zoomType: additionOptions && additionOptions.chart && additionOptions.chart.zoom_type ? additionOptions.chart.zoom_type : 'None',
@@ -3240,7 +3314,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             chartOptions.colors = opts.paletteOptions.dashboardPalette.colors;
         }
         chartOptions.series = highchartsRenderer
-            .ptCreateWaterfallBreakdownSeries(pivotData, null, additionOptions, opts);
+            .ptCreateWaterfallBreakdownSeries(pivotData, additionOptions, opts);
 
         chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
         chartOptions.plotOptions = {
@@ -3283,6 +3357,122 @@ 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;
+        }
+        const walkthroughFieldIsNotSet = lodash.some(pivotData.getRowKeys(), rowKey => !rowKey || lodash.isArray(rowKey) && !rowKey.length);
+
+        chartOptions.xAxis = {
+            type: 'category',
+            crosshair: true,
+            min: 0,
+            title: {
+                text : additionOptions && additionOptions.axisX ? additionOptions.axisX.name : '',
+            },
+            uniqueNames: walkthroughFieldIsNotSet,
+        };
+
+        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;
@@ -4351,6 +4541,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) {
@@ -4359,10 +4560,15 @@ 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 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;
             const uniqueCategories = lodash.filter(
                 lodash.uniq(
                     lodash.map(rowData, row => row[widget.cols[0].name])
@@ -4372,11 +4578,13 @@ 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 \
                         the quantity of data doesn't match the chart's ${ minCategories }-${ maxCategories } value limit.`,
-                    class: 'nodata',
+                    class: uniqueCategories.length < minCategories ? 'waterfall-nodata' : 'waterfall-too-much-data',
                 }
                 return highchartsRenderer.getNoDataResult(options.rendererOptions, true);
             }
@@ -4620,19 +4828,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) {
@@ -4652,8 +4866,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;
         }
 
@@ -4965,12 +5179,28 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         });
 
+        // add virtual fields to rows if required
+        let rows = widgetOptions.rows;
+        if (!lodash.get(widgetOptions, 'rows.length') && widgetOptions.options.breakdown_options) {
+            rows = [
+                {
+                    id: -1,
+                    name: highchartsRenderer.VIRTUAL_FIELDS.WATERFALL_VARIANCE,
+                    type: 'Text',
+                },
+            ];
+        }
+
         // fill rows fields
-        lodash.forEach(widgetOptions.rows, function (valObj) {
-            fieldOb = lodash.find(fields, {id: valObj.id});
-            if (fieldOb) {
-                legendFields.push(fieldOb);
-                lodash.remove(fields, {id: fieldOb.id});
+        lodash.forEach(rows, function (valObj) {
+            if (lodash.includes(highchartsRenderer.VIRTUAL_FIELDS, valObj.name)) {
+                legendFields.push(valObj);
+            } else {
+                fieldOb = lodash.find(fields, {id: valObj.id});
+                if (fieldOb) {
+                    legendFields.push(fieldOb);
+                    lodash.remove(fields, {id: fieldOb.id});
+                }
             }
         });
 
@@ -5097,71 +5327,22 @@ 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) => {
-            lodash.forEach(fieldsArr, function (valObj) {
-                fieldOb = lodash.find(fields, { id: valObj.id });
-                if (fieldOb) {
-                    destinationArr.push(fieldOb);
-                    lodash.remove(fields, { id: fieldOb.id });
-                }
-            });
-        }
+        var fields = highchartsRenderer.objectCopyJsonMethod(selectedTemplate.widget_fields);
+        var fieldOb;
+        var selectedFields = [];
 
-        lodash.forEach(filters, function (filterObj) {
-            fieldOb = lodash.find(fields, { id: filterObj.id });
-            if (fieldOb && filterObj.values && filterObj.values.datetype && filterObj.values.datetype === 'list') {
-                filterObj.values = filterObj.values.val
-            } else if (fieldOb && filterObj.values && filterObj.values.datetype && filterObj.values.datetype !== 'list') {
-                fieldOb.values = filterObj.values;
-            } else if (fieldOb && filterObj.values && filterObj.values.type === 'advanced') {
-                fieldOb.values = filterObj.values;
-            }
-            if (fieldOb && filterObj.values && filterObj.values instanceof Array) {
-                if (filterObj.is_excluded == true) {
-                    fieldOb.excludes = filterObj.values;
-                } else {
-                    fieldOb.includes = filterObj.values;
-                }
-            }
-            if (filterObj.allow_nulls && fieldOb) {
-                fieldOb.allow_nulls = filterObj.allow_nulls;
+        // fill selected fields
+        lodash.forEach(calcModelOptions.fields, function (valObj) {
+            fieldOb = lodash.find(fields, {id: valObj.id});
+            if (fieldOb) {
+                selectedFields.push(fieldOb);
+                lodash.remove(fields, {id: fieldOb.id});
             }
         });
 
-        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);
-
         calcModelOptions.pivot = {
             fieldsArray: fields,
-            selectedFieldsArray: dataSeriesFields,
-            filtersArray: filterFields,
-            scenarioField,
-            dateFields,
-            dataTypeFields,
-            valueFields
+            selectedFieldsArray: selectedFields
         };
     }
 
@@ -5660,7 +5841,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return valToReturn;
     };
 
-    
+
     highchartsRenderer.getChartAxisLabel = function(type) {
         return highchartsRenderer.chartsTypesInfo[type] ? highchartsRenderer.chartsTypesInfo[type].axisName : CHART_AXIS_DEFAULT_LABEL;
     };
@@ -6495,7 +6676,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     value_name: 'show',
                     default_value: true,
                     disabled_str: '!{var}.show_out_of_x_axis && !{var}.show_out_of_data_series && !{var}.show_value && !{var}.show_x_axis && !{var}.show_data_series',
-                    disabled_fn: (value) => !value.show_out_of_x_axis 
+                    disabled_fn: (value) => !value.show_out_of_x_axis
                         && !value.show_out_of_data_series
                         && !value.show_value
                         && !value.show_x_axis
@@ -6536,8 +6717,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     element_label: '[X Axis]',
                     value_name: 'show_x_axis',
                     default_value: true,
-                    clickFn: (value) => value.show = value.show 
-                        ? value.show_out_of_x_axis || value.show_out_of_data_series || value.show_value || value.show_x_axis || value.show_data_series 
+                    clickFn: (value) => value.show = value.show
+                        ? value.show_out_of_x_axis || value.show_out_of_data_series || value.show_value || value.show_x_axis || value.show_data_series
                         : value.show,
                 },
                 {
@@ -6545,8 +6726,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     element_label: '[Data Series]',
                     value_name: 'show_data_series',
                     default_value: true,
-                    clickFn: (value) => value.show = value.show 
-                        ? value.show_out_of_x_axis || value.show_out_of_data_series || value.show_value || value.show_x_axis || value.show_data_series 
+                    clickFn: (value) => value.show = value.show
+                        ? value.show_out_of_x_axis || value.show_out_of_data_series || value.show_value || value.show_x_axis || value.show_data_series
                         : value.show,
                 },
                 {
@@ -6554,8 +6735,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     element_label: 'Value',
                     value_name: 'show_value',
                     default_value: true,
-                    clickFn: (value) => value.show = value.show 
-                        ? value.show_out_of_x_axis || value.show_out_of_data_series || value.show_value || value.show_x_axis || value.show_data_series 
+                    clickFn: (value) => value.show = value.show
+                        ? value.show_out_of_x_axis || value.show_out_of_data_series || value.show_value || value.show_x_axis || value.show_data_series
                         : value.show,
                 },
                 {
@@ -6563,8 +6744,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     element_label: '% Out of [X Axis]',
                     value_name: 'show_out_of_x_axis',
                     default_value: false,
-                    clickFn: (value) => value.show = value.show 
-                        ? value.show_out_of_x_axis || value.show_out_of_data_series || value.show_value || value.show_x_axis || value.show_data_series 
+                    clickFn: (value) => value.show = value.show
+                        ? value.show_out_of_x_axis || value.show_out_of_data_series || value.show_value || value.show_x_axis || value.show_data_series
                         : value.show,
                 },
                 {
@@ -6572,8 +6753,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     element_label: '% Out of [Data Series]',
                     value_name: 'show_out_of_data_series',
                     default_value: false,
-                    clickFn: (value) => value.show = value.show 
-                        ? value.show_out_of_x_axis || value.show_out_of_data_series || value.show_value || value.show_x_axis || value.show_data_series 
+                    clickFn: (value) => value.show = value.show
+                        ? value.show_out_of_x_axis || value.show_out_of_data_series || value.show_value || value.show_x_axis || value.show_data_series
                         : value.show,
                 },
             ]
@@ -6747,16 +6928,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',
@@ -6879,7 +7060,17 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             axisTooltipDescription: 'The category (usually an independent variable) is shown on the x-axis and should be between 2 to 5 total columns. ',
             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 ',
@@ -7535,6 +7726,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,
+                    },
                 ]
             },
         ];
@@ -7691,7 +7900,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     _.forEach(Object.keys(dates), key => {
                         const dateConfiguration = dates[key];
                         const timestamp = dateConfiguration.timestamp;
-                        if (timestamp) {               
+                        if (timestamp) {
                             const dateTzOffsetInSeconds = new Date(timestamp * 1000).getTimezoneOffset() * 60;
                             dateConfiguration.displayedValue = new Date((timestamp + dateTzOffsetInSeconds) * 1000)
                                 .toLocaleDateString();
@@ -7987,10 +8196,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     };
 
     highchartsRenderer.createDateFromString = function (dateString, format) {
-        if ((format && !highchartsRenderer.isDateFormat(dateString, format)) || !highchartsRenderer.isDate(dateString)) {
+        if (!(format && highchartsRenderer.isDateFormat(dateString, format) || highchartsRenderer.isDate(dateString))) {
             return null;
         }
-        const utcDate = format 
+        const utcDate = format
             ? moment_lib.utc(dateString, format, true)
             : moment_lib.utc(dateString);
         return utcDate.startOf('day').unix();
@@ -8008,7 +8217,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }
 
         let filters = [];
-        
+
         if (widget.chart_type === highchartsRenderer.CHART_TYPES.WATERFALL_BREAKDOWN) {
             const colFilter = highchartsRenderer.createFilterObject(widget.cols[0]);
             const labels = [];
@@ -8036,7 +8245,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                             col_value,
                             highchartsRenderer.getDateFieldFormat(widget, widget.cols[index])
                         );
-    
+
                         if ($.isEmptyObject(datetrange)) {
                             return;
                         }
@@ -8141,6 +8350,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 filter.is_excluded = false;
             } else {
                 filter = highchartsRenderer.createDrillDownFilterObject(widget, widget.cols[0], colKey[0]);
+                filters.push(filter);
             }
             filter.values = [];
             for (let i = 0; i < colKey.length; i++) {
@@ -8278,7 +8488,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) {
@@ -8684,14 +8894,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) {
@@ -8706,7 +8916,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     }
 
     highchartsRenderer.getDateFieldFormat = function(widget, dateField) {
-        const aggregationConfig = widget.options && widget.options.date_aggregation_configs 
+        const aggregationConfig = widget.options && widget.options.date_aggregation_configs
             ? _.find(widget.options.date_aggregation_configs, { field_id: dateField.id })
             : null;
 
@@ -8743,7 +8953,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             rows = [];
         } else {
             rows = cols;
-            cols = [];
+            cols = [point.colKeys[1]];
         }
         return { rows, cols };
     }

package/src/novix_renderer.js

@@ -28,8 +28,6 @@ let initNovixRenderer = function($, window, document, Handsontable){
     const delim = " , ";
     const subtotal = "subtotalDatarailsPlaceholder";
     const replaceValue = "SubTotals";
-    const useNewUx = document.ReportHippo && document.ReportHippo && document.ReportHippo.user &&
-      document.ReportHippo.user.organization.settings && document.ReportHippo.user.organization.settings.use_new_ux;
 
     $.pivotUtilities.novix_renderers = {
 
@@ -889,9 +887,14 @@ let initNovixRenderer = function($, window, document, Handsontable){
 
             // inject the widgetId to the class name so we can separate the tables by it
             // look for the search side on line 653 "opts.$el.find(".widget-id-" + opts.widgetId);"
-            return `<div class='novixPivot widget-id-${opts.widgetId} ${
-              useNewUx && opts.chartOptions.table_options.use_new_table_design ? 'handsontable-new' : ''
-            }' style='overflow:auto'></div>`;
+            var tableClasses = ['novixPivot', `widget-id-${opts.widgetId}`];
+            if (opts.chartOptions.table_options.use_new_table_design) {
+                tableClasses.push('handsontable-new');
+            }
+            if (!pvtData.aggregator().uniq) {
+                tableClasses.push('numbers-to-right');
+            }
+            return `<div class='${tableClasses.join(' ')}' style='overflow:auto'></div>`;
         }
 
     };

package/src/pivot.css

@@ -29,9 +29,6 @@ table.pvtTable tbody tr th > i {
     font-size: 10px;
 }
 
-table.pvtTable .pvtColLabel {text-align: center;}
-table.pvtTable .pvtTotalLabel {text-align: right;}
-
 table.pvtTable tbody tr td {
     color: #3D3D3D;
     padding: 5px;
@@ -263,11 +260,6 @@ table.pvtTable.newPvtTable tbody tr td.rowTotal {
   background-color: #dfe6ec !important;
   border-color: #ffffff !important;
 }
-table.pvtTable.newPvtTable .pvtColLabel,
-table.pvtTable.newPvtTable .pvtTotalLabel,
-table.pvtTable.newPvtTable .pvtTotalLabel.rowTotal {
-  text-align: left;
-}
 
 table.pvtTable.newPvtTable tbody tr th .fa {
   padding: 2px;
@@ -408,3 +400,27 @@ table.pvtTable.newPvtTable tbody tr td:hover:after {
   top: 4px;
   font-size: 12px;
 }
+
+
+/* Table cells alignment */
+table.pvtTable .pvtColLabel {text-align: center;}
+table.pvtTable .pvtTotalLabel {text-align: right;}
+
+table.pvtTable.newPvtTable .pvtColLabel,
+table.pvtTable.newPvtTable .pvtTotalLabel,
+table.pvtTable.newPvtTable .pvtTotalLabel.rowTotal {
+    text-align: left;
+}
+
+table.pvtTable thead tr th.pvtColLabel,
+table.pvtTable thead tr th.pvtTotalLabel  {
+    text-align: center !important;
+}
+
+table.pvtTable.numbers-to-right tbody tr td.pvtVal,
+table.pvtTable.numbers-to-right tbody tr td.rowTotal.rowTotal,
+table.pvtTable.numbers-to-right tbody tr td.pvtGrandTotal  {
+    text-align: right !important;
+    padding-right: 9px;
+    line-height: 15px;
+}