@datarailsshared/dr_renderer 1.2.178 → 1.2.180

package/package.json

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

package/src/highcharts_renderer.js

@@ -1,3 +1,12 @@
+const SERIES_CLASSNAMES = {
+    WATERFALL_BREAKDOWN: 'waterfallBreakdown',
+    TOTAL_SERIES: 'totalSeries',
+    TREND_SERIES: 'trendSeries',
+};
+
+const EMPTY_ROW_N_KEYS = [[]];
+const NULL_VALUE = '[null]';
+
 let getHighchartsRenderer = function ($, document, Highcharts, default_colors, highchartsRenderer,
                                       DataFormatter, lodash, moment_lib, isNewAngular) {
 
@@ -51,6 +60,32 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     ].join(''), 'i');
     highchartsRenderer.isMobile = mobileBrowserRegex.test(navigator.userAgent);
 
+    highchartsRenderer.CHART_TYPES = {
+        LINE_CHART: 'line-chart',
+        LINE_CHART_SMOOTH: 'line-chart-smooth',
+        COLUMN_CHART: 'column-chart',
+        COLUMN_CHART_STACKED: 'column-chart-stacked',
+        COMBO_CHART: 'combo-chart',
+        COMBO_COLUMN_CHART: 'combo-column-chart',
+        COMBO_STACKED_CHART: 'combo-stacked-chart',
+        BAR_CHART: 'bar-chart',
+        BAR_CHART_STACKED: 'bar-chart-stacked',
+        SCATTER_CHART: 'scatter-chart',
+        AREA_CHART: 'area-chart',
+        AREA_CHART_SMOOTH: 'area-chart-smooth',
+        TABLE_ONLY: 'table_only',
+        POLYGON_CHART: 'polygon-chart',
+        PIE_CHART: 'pie-chart',
+        PIE_CHART_DRILLDOWN: 'pie-chart-drilldown',
+        GAUGE_SOLID_CHART: 'gauge-solid-chart',
+        GAUGE_CHART: 'gauge-chart',
+        KPI_WIDGET: 'kpi-widget',
+        TEXT_WIDGET: 'text-widget',
+        WATERFALL_BREAKDOWN: 'waterfall-chart-breakdown',
+        PUBLISHED_ITEM: 'published_item',
+        RICH_TEXT: 'rich_text',
+    };
+
     highchartsRenderer.highcharts_theme = {
         "colors": highchartsRenderer.defaults_colors,
         "chart": {
@@ -423,7 +458,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         const labelOptions = lodash.get(opts.chartOptions, 'label') || lodash.get(opts.chartOptions, 'label_pie');
         const othersName = opts.total_value_options ?
-            lodash.get(opts, "total_value_options.filter_options.filteredOutFieldName") || 'Others' :
+            highchartsRenderer.getOthersName(opts) :
             undefined;
         var drOthersInColumn = lodash.find(
             pivotData.getColKeys(), 
@@ -445,6 +480,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     || this.series.options.className === 'trendSeries') {
                     rows = [];
                 }
+
                 var cols = this.key;
                 if (typeof (cols) == 'object' && cols.name) {
                     cols = cols.name;
@@ -500,6 +536,13 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     }
 
                     const percentageWrapper = percentageArray.length ? `(${percentageArray.join(', ')})` : '';
+
+                    if (this.series.options.className === SERIES_CLASSNAMES.WATERFALL_BREAKDOWN) {
+                        const modifiedRowsAndCols = highchartsRenderer.transformRowsAndColsForBreakdown(rows, cols, this.point, opts);
+                        rows = modifiedRowsAndCols.rows;
+                        cols = modifiedRowsAndCols.cols;
+                    }
+
                     var aggr = pivotData.getAggregator(rows, cols);
 
                     const formattedValue = is_drill_down_pie || labelOptions.show_value ? $.pivotUtilities.getFormattedNumber(value, aggr, opts, true) : '';
@@ -570,6 +613,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }
 
         var func = function () {
+            const isWaterfallBreakdown = this.series.options.className === SERIES_CLASSNAMES.WATERFALL_BREAKDOWN;
+
             var y = parseFloat(this.y);
             if (pivotData) {
                 let series_name = (this.series.name || '') + "";
@@ -604,8 +649,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         cols = rows;
                         rows = temp;
                     }
-                    var aggr = pivotData.getAggregator(rows, cols);
-                    var category_text = `<span style="font-weight: bold;">${cols} </span>`;
+
+                    var category_text = `<span style="font-weight: bold;">${ cols }${ isWaterfallBreakdown ? ': ' : ' ' }</span>`;
                     if (this.category) {
                         category_text = '';
                     }
@@ -617,9 +662,18 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     if (pivotData.rowAttrs.length == 0) {
                         series_text = ': ';
                     }
+
+                    if (isWaterfallBreakdown) {
+                        const modifiedRowsAndCols = highchartsRenderer.transformRowsAndColsForBreakdown(rows, cols, this.point, opts);
+                        rows = modifiedRowsAndCols.rows;
+                        cols = modifiedRowsAndCols.cols;
+                    }    
+
+                    var aggr = pivotData.getAggregator(rows, cols);
+
                     let formatted_value_to_return = $.pivotUtilities.getFormattedNumber(y, null, opts);
-                    if (aggr.value()) {
-                        formatted_value_to_return = $.pivotUtilities.getFormattedNumber(aggr.value(), aggr, opts);
+                    if (aggr.value() || isWaterfallBreakdown) {
+                        formatted_value_to_return = $.pivotUtilities.getFormattedNumber(isWaterfallBreakdown ? y : aggr.value(), aggr, opts);
                     }
 
                     let wrappedFormattedValue = highchartsRenderer.getSpanWrapper(formatted_value_to_return);
@@ -628,7 +682,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     category_text = tooltipOptions.show_x_axis ? category_text : '';
                     series_text = tooltipOptions.show_data_series ? series_text : '';
 
-                    let to_return = category_text + series_text + wrappedFormattedValue;
+                    let to_return = isWaterfallBreakdown ? `${ category_text }${ wrappedFormattedValue }` : category_text + series_text + wrappedFormattedValue;
 
                     if (is_drill_down_pie) {
                         to_return = wrappedFormattedValue;
@@ -964,7 +1018,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         const n = col_n_keys.length;
         const xSum = (1 + n) / 2 * n;
         const trendSerieses = [];
-        const othersName = lodash.get(opts, "total_value_options.filter_options.filteredOutFieldName") || 'Others';
+        const othersName = highchartsRenderer.getOthersName(opts);
 
         lodash.forEach(row_n_keys, function (row_n_value) {
             var ob = {};
@@ -1061,7 +1115,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         opts.chart_series = []
 
-        if (!lodash.isEqual(row_n_keys, [[]])) {
+        if (!lodash.isEqual(row_n_keys, EMPTY_ROW_N_KEYS)) {
             chart_series.forEach(series => {
                 opts.chart_series.push(series.name);
             })
@@ -1112,7 +1166,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         const n = col_n_keys.length;
         const xSum = (1 + n) / 2 * n;
         const trendSerieses = [];
-        const othersName = lodash.get(opts, "total_value_options.filter_options.filteredOutFieldName") || 'Others';
+        const othersName = highchartsRenderer.getOthersName(opts);
 
         lodash.forEach(row_n_keys, function (row_n_value) {
             let ySum = 0;
@@ -1128,7 +1182,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 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)
+                style: highchartsRenderer.getDataLabelsStyle(additionOptions),
             }
 
             ob = highchartsRenderer.getDataLabelsOptions(additionOptions, ob);
@@ -1221,7 +1275,7 @@ 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, [[]])) {
+        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});
                 if (savedSeriesOption) {
@@ -1234,7 +1288,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         opts.chart_series = []
 
-        if (!lodash.isEqual(row_n_keys, [[]])) {
+        if (!lodash.isEqual(row_n_keys, EMPTY_ROW_N_KEYS)) {
             chart_series.forEach(series => {
                 opts.chart_series.push(series.name);
             })
@@ -1284,6 +1338,94 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return chart_series;
     }
 
+    highchartsRenderer.ptCreateWaterfallBreakdownSeries = function (pivotData, onlyNumbers, 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([]);
+        }
+
+        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: colorOptions.increase,
+            color: colorOptions.decrease,
+            className: SERIES_CLASSNAMES.WATERFALL_BREAKDOWN
+        };
+        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;
+
+                if (col_index) {
+                    const value = val - breakdownValues[col_index - 1][row_index];
+
+                    if (value) {
+                        var tmoobj = {};
+                        var key = row_n_value;
+                        if (lodash.isArray(row_n_value)) {
+                            key = row_n_value[0];
+                        }
+                        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.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 => {
+                opts.chart_series.push(series.name);
+            });
+        }
+
+        return chart_series;
+    }
+
     highchartsRenderer.setChartTypeBySeriesType = function (type, series) {
         const types = {
             'line-chart': 'line',
@@ -1397,7 +1539,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         var num_rows = row_n_keys.length;
 
         const isOthersIncludedInRow = num_rows === 1 && lodash.includes(row_n_keys[0], 'DR_Others');
-        const othersName = lodash.get(opts, "total_value_options.filter_options.filteredOutFieldName") || 'Others';
+        const othersName = highchartsRenderer.getOthersName(opts);
 
         lodash.forEach(col_n_keys, function (col_n_value) {
             const row_n_value = isOthersIncludedInRow ? row_n_keys[0] : [];
@@ -1444,7 +1586,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         var num_cols = col_n_keys.length;
         var num_rows = row_n_keys.length;
 
-        const othersName = lodash.get(opts, "total_value_options.filter_options.filteredOutFieldName") || 'Others';
+        const othersName = highchartsRenderer.getOthersName(opts);
 
         lodash.forEach(col_n_keys, function (col_n_value) {
             var col_ob = {};
@@ -3041,11 +3183,110 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
+    highchartsRenderer.ptRenderWaterfallBreakdown = function (pivotData, opts, drilldownFunc, chartType) {
+        let chartOptions = {};
+        const additionOptions = opts.chartOptions 
+            ? opts.chartOptions
+            : highchartsRenderer.getDefaultValueForChart(highchartsRenderer.CHART_TYPES.WATERFALL_BREAKDOWN);
+
+        chartOptions.chart = {
+            type: 'waterfall',
+            zoomType: additionOptions && additionOptions.chart && additionOptions.chart.zoom_type ? additionOptions.chart.zoom_type : 'None',
+        };
+        if (disableAnimation) {
+            chartOptions.chart.animation = false;
+        }
+
+        const breakdownFieldIsNotSet = 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: breakdownFieldIsNotSet,
+        };
+
+        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
+            .ptCreateWaterfallBreakdownSeries(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
+                }
+            }
+        };
+
+        if (opts.drillDownListFunc) {
+            chartOptions.plotOptions.series.cursor = 'pointer';
+            chartOptions.plotOptions.series.point = {
+                events: {
+                    click: opts.drillDownListFunc
+                }
+            };
+        }
+
+        chartOptions.legend = {
+            enabled: false
+        };
+
+        return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
+    };
+
     highchartsRenderer.formatFieldValue = function (field, value) {
         let currentType = '';
+        let format = field.format;
         switch (field.type) {
             case 'Date':
                 currentType = 'd';
+                if (!format) {
+                    format = 'MM/DD/YYYY'
+                }
                 break;
             case 'Float':
             case 'Integer':
@@ -3054,7 +3295,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             default:
                 return value;
         }
-        const formattedValue = highchartsRenderer.formatValue(currentType, field.format, value, null);
+        const formattedValue = highchartsRenderer.formatValue(currentType, format, value, null);
         if (formattedValue && formattedValue.value === 'Invalid Date') {
             formattedValue.value =  value;
         }
@@ -4105,7 +4346,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }
     };
 
-    highchartsRenderer.rhPivotView = function (rowData, options, isTable = false) {
+    highchartsRenderer.rhPivotView = function (rowData, options, isTable = false, widget = null) {
         if (!rowData || !rowData) {
             if (options.onlyOptions) {
                 return {};
@@ -4113,6 +4354,32 @@ 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
+            );
+
+            if (uniqueCategories && (uniqueCategories.length > maxCategories || uniqueCategories.length < minCategories )) {
+                const commonErrorSentence = `Please choose ${ minCategories }-${ maxCategories } items in the Category section.`
+                options.error_has_occurred = true;
+                options.error_params = {
+                    title: uniqueCategories.length > maxCategories
+                        ? `There is too much data. ${ commonErrorSentence }`
+                        : `Not enough data. ${ commonErrorSentence }`,
+                    text: '',
+                    btnText: 'Edit Widget',
+                    class: 'too-much-data',
+                }
+                return highchartsRenderer.getNoDataResult(options.rendererOptions, true);
+            }
+        }
+
         if (rowData.length == 0) {
             if (options.onlyOptions) {
                 return {};
@@ -6521,6 +6788,17 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     };
 
     highchartsRenderer.chartsTypesInfo = {
+        [highchartsRenderer.CHART_TYPES.WATERFALL_BREAKDOWN]: {
+            name: 'Waterfall Breakdown Chart ',
+            label: 'Waterfall Breakdown Chart ',
+            title: 'TODO: add text',
+            description: 'TODO: add text',
+            axisName: 'Category',
+            legendName: 'Breakdown',
+            startedMessage: 'To get started, drag one field to the Category and one field to the Value section.',
+            axisTooltipTitle: 'TODO: add text',
+            legendTooltipTitle: 'TODO: add text',
+        }, 
         'combo-chart': {
             name: 'Combo Chart ',
             label: 'Combo Chart ',
@@ -7153,6 +7431,32 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 }
                 ]
             },
+            {
+                type: 'waterfall-chart',
+                name: 'Waterfall',
+                hidden: true,
+                class: 'google-visualization-charteditor-mini-column',
+                subtypes: [
+                    {
+                        type: highchartsRenderer.CHART_TYPES.WATERFALL_BREAKDOWN,
+                        name:  highchartsRenderer.chartsTypesInfo[highchartsRenderer.CHART_TYPES.WATERFALL_BREAKDOWN].name,
+                        class: 'google-visualization-charteditor-thumbs-columnchart',
+                        render: highchartsRenderer.ptRenderWaterfallBreakdown,
+                        suboptions: [
+                            highchartsRenderer.suboptions["axisY"],
+                            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"],
+                        ]
+                    },
+                ]
+            },
         ];
 
     highchartsRenderer.richTextSubType = {
@@ -7602,6 +7906,16 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
     };
 
+    highchartsRenderer.createDateFromString = function (dateString, format) {
+        if ((format && !highchartsRenderer.isDateFormat(dateString, format)) || !highchartsRenderer.isDate(dateString)) {
+            return null;
+        }
+        const utcDate = format 
+            ? moment_lib.utc(dateString, format, true)
+            : moment_lib.utc(dateString);
+        return utcDate.startOf('day').unix();
+    }
+
     highchartsRenderer.prepareDrillDownFilters = function (r_keys, c_keys, widget) {
         let row_key = r_keys;
         let col_key = c_keys;
@@ -7615,26 +7929,46 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         let filters = [];
         
-        lodash.forEach(col_key, function (col_value, index) {
-            if (widget && widget.cols[index]) {
-                let temp = highchartsRenderer.createFilterObject(widget.cols[index]);
-                if (widget.cols[index].type === 'Date') {
-                    let datetrange = highchartsRenderer.createDateTypeFromValue(
+        if (widget.chart_type === highchartsRenderer.CHART_TYPES.WATERFALL_BREAKDOWN) {
+            const colFilter = highchartsRenderer.createFilterObject(widget.cols[0]);
+            const labels = [];
+            colFilter.values = [];
+            lodash.forEach(col_key, function (col_value) {
+                if (widget.cols[0].type === 'Date') {
+                    let date = highchartsRenderer.createDateFromString(
                         col_value,
-                        highchartsRenderer.getDateFieldFormat(widget, widget.cols[index])
+                        highchartsRenderer.getDateFieldFormat(widget, widget.cols[0])
                     );
-
-                    if ($.isEmptyObject(datetrange)) {
-                        return;
-                    }
-                    temp.values = datetrange;
-                    temp.values.label = col_value;
+                    colFilter.values.push(date);
                 } else {
-                    temp.values = [col_value];
+                    colFilter.values.push(col_value);
                 }
-                filters.push(temp);
-            }
-        });
+                labels.push(col_value);
+            });
+            colFilter.value_to_show = labels.join(', ');
+            filters.push(colFilter);
+        } else {
+            lodash.forEach(col_key, function (col_value, index) {
+                if (widget && widget.cols[index]) {
+                    let temp = highchartsRenderer.createFilterObject(widget.cols[index]);
+                    if (widget.cols[index].type === 'Date') {
+                        let datetrange = highchartsRenderer.createDateTypeFromValue(
+                            col_value,
+                            highchartsRenderer.getDateFieldFormat(widget, widget.cols[index])
+                        );
+    
+                        if ($.isEmptyObject(datetrange)) {
+                            return;
+                        }
+                        temp.values = datetrange;
+                        temp.values.label = col_value;
+                    } else {
+                        temp.values = [col_value];
+                    }
+                    filters.push(temp);
+                }
+            });
+        }
 
         lodash.forEach(row_key, function (row_value, index) {
             if (widget && widget.rows[index]) {
@@ -7679,6 +8013,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         });
 
         lodash.forEach(filters, function (filter) {
+            if (filter.value_to_show) {
+                return;
+            }
             if (Array.isArray(filter.values)) {
                 if (filter.type) {
                     for (let i = 0; i < filter.values.length; i++) {
@@ -7717,15 +8054,36 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 filters.push(highchartsRenderer.createDrillDownFilterObject(widget, widget.rows[i], rowKey[i]))
             }
         }
-        for (let i = 0; i < colKey.length; i++) {
-            let filter = lodash.find(filters, {name: widget.cols[i].name});
+
+        if (widget.chart_type === highchartsRenderer.CHART_TYPES.WATERFALL_BREAKDOWN) {
+            let filter = lodash.find(filters, {name: widget.cols[0].name});
             if (filter) {
                 filter.is_excluded = false;
-                filter.values = widget.cols[i].type === 'Date' ?
-                    highchartsRenderer.createDateTypeFromValue(colKey[i], highchartsRenderer.getDateFieldFormat(widget, widget.cols[i])) :
-                    [colKey[i]];
             } else {
-                filters.push(highchartsRenderer.createDrillDownFilterObject(widget, widget.cols[i], colKey[i]))
+                filter = highchartsRenderer.createDrillDownFilterObject(widget, widget.cols[0], colKey[0]);
+            }
+            filter.values = [];
+            for (let i = 0; i < colKey.length; i++) {
+                filter.values.push(
+                    widget.cols[0].type === 'Date'
+                        ? highchartsRenderer.createDateFromString(
+                            colKey[i],
+                            highchartsRenderer.getDateFieldFormat(widget, widget.cols[0])
+                        )
+                        : colKey[i]
+                );
+            }
+        } else {
+            for (let i = 0; i < colKey.length; i++) {
+                let filter = lodash.find(filters, {name: widget.cols[i].name});
+                if (filter) {
+                    filter.is_excluded = false;
+                    filter.values = widget.cols[i].type === 'Date' ?
+                        highchartsRenderer.createDateTypeFromValue(colKey[i], highchartsRenderer.getDateFieldFormat(widget, widget.cols[i])) :
+                        [colKey[i]];
+                } else {
+                    filters.push(highchartsRenderer.createDrillDownFilterObject(widget, widget.cols[i], colKey[i]))
+                }
             }
         }
         return filters;
@@ -7817,7 +8175,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         if ($.pivotUtilities && !$.pivotUtilities.additionalFieldsList) {
             $.pivotUtilities.additionalFieldsList = [
                 {key: 'DR_Average', name: 'DR_Average'},
-                {key: 'DR_Others', name: _.get(widget.options, "total_value_options.filter_options.filteredOutFieldName") || 'Others'}
+                {key: 'DR_Others', name: highchartsRenderer.getOthersName(widget.options)}
             ];
         }
 
@@ -7866,9 +8224,16 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         lodash.forEach(datesFields, function (row) {
             row.values = lodash.uniq(row.values);
 
-            const isTimestampDateField = row.type === 'Date' && typeof row.values[0] === 'number';
+            const isTimestampDateField = row.type === 'Date' && lodash.some(row.values, value => typeof value ==='number');
             if (isTimestampDateField) {
+                const nullValueIndex = row.values.indexOf(NULL_VALUE);
+                if (~nullValueIndex) {
+                    row.values.splice(nullValueIndex, 1);
+                }
                 row.values = row.values.sort((a, b) => a - b);
+                if (~nullValueIndex) {
+                    row.values.push(NULL_VALUE);
+                }
             } else {
                 row.values = row.values.sort();
             }
@@ -8058,7 +8423,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             subopts.onlyOptions = true;
         }
 
-        let hc_options = highchartsRenderer.rhPivotView(res, subopts, is_table);
+        let hc_options = highchartsRenderer.rhPivotView(res, subopts, is_table, widget_obj);
 
         return hc_options;
     }
@@ -8285,6 +8650,24 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }
     }
 
+    highchartsRenderer.getOthersName = function(opts) {
+        return lodash.get(opts, "total_value_options.filter_options.filteredOutFieldName") || 'Others';
+    }
+
+    highchartsRenderer.transformRowsAndColsForBreakdown = function(rows, cols, point, opts) {
+        const othersIndex = cols.indexOf(highchartsRenderer.getOthersName(opts));
+        if (othersIndex !== -1) {
+            cols[othersIndex] = 'DR_Others';
+        }
+        if (point.options.isTotal) {
+            rows = [];
+        } else {
+            rows = cols;
+            cols = [];
+        }
+        return { rows, cols };
+    }
+
     return highchartsRenderer;
 };