@datarailsshared/dr_renderer 1.2.56 → 1.2.60

package/package.json

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

package/src/dr_pivottable.js

@@ -113,7 +113,7 @@ let initDRPivotTable = function($, window, document) {
             };
         };
 
-        processKey = function(record, totals, keys, attrs, getAggregator) {
+        processKey = function(record, totals, keys, attrs, containsAverage, containsOthers, getAggregator) {
             var addKey, attr, flatKey, k, key, len, ref;
             key = [];
             addKey = false;
@@ -125,7 +125,17 @@ let initDRPivotTable = function($, window, document) {
                     totals[flatKey] = getAggregator(key.slice());
                     addKey = true;
                 }
-                totals[flatKey].push(record);
+
+                if (containsAverage || containsOthers) {
+                    if (containsAverage && key[0] === 'DR_Average') {
+                        totals[flatKey].push(record);
+                    }
+                    if (containsOthers && key[0] === 'DR_Others') {
+                        totals[flatKey].push(record);
+                    }
+                } else {
+                    totals[flatKey].push(record);
+                }
             }
             if (addKey) {
                 keys.push(key);
@@ -203,13 +213,18 @@ let initDRPivotTable = function($, window, document) {
             var colKey, fColKey, fRowKey, flatColKey, flatRowKey, i, j, k, m, n, ref, results, rowKey;
             rowKey = [];
             colKey = [];
-            this.allTotal.push(record);
-            rowKey = processKey(record, this.rowTotals, this.rowKeys, this.rowAttrs, (function(_this) {
+            const recordValues = Object.values(record);
+            const containsAverage = recordValues.includes('DR_Average');
+            const containsOthers = recordValues.includes('DR_Others');
+            if (!containsAverage && !containsOthers) {
+                this.allTotal.push(record);
+            }
+            rowKey = processKey(record, this.rowTotals, this.rowKeys, this.rowAttrs, containsAverage, containsOthers,  (function(_this) {
                 return function(key) {
                     return _this.aggregator(_this, key, []);
                 };
             })(this));
-            colKey = processKey(record, this.colTotals, this.colKeys, this.colAttrs, (function(_this) {
+            colKey = processKey(record, this.colTotals, this.colKeys, this.colAttrs, containsAverage, containsOthers, (function(_this) {
                 return function(key) {
                     return _this.aggregator(_this, [], key);
                 };
@@ -1194,6 +1209,9 @@ let initDRPivotTable = function($, window, document) {
             if (opts.chartOptions.table_options.hide_nulls_in_headers) {
                 th.textContent = th.textContent.replace('[null]', '');
             }
+            if (th.textContent === 'DR Others') {
+                th.textContent = _.get(opts, "total_value_options.filter_options.filteredOutFieldName") || 'Others'
+            }
 
             if (th.hasAttribute('data_show_more') && th.colSpan > 0 && !hasColLabels) {
                 th.colSpan = th.colSpan - 1;

package/src/highcharts_renderer.js

@@ -909,6 +909,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         var variat_serias = null;
         const n = col_n_keys.length;
         const xSum = (1 + n) / 2 * n;
+        const trendSerieses = [];
 
         lodash.forEach(row_n_keys, function (row_n_value) {
             var ob = {};
@@ -916,8 +917,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             let xySum = 0;
             let squareXSum = 0;
             ob.data = [];
-            if (row_n_value && row_n_value.length > 0)
-                ob.name = row_n_value.join(highchartsRenderer.delimer);
+            if (row_n_value && row_n_value.length > 0) {
+                let othersName = lodash.get(opts, "total_value_options.filter_options.filteredOutFieldName") || 'Others';
+                ob.name = row_n_value.join(highchartsRenderer.delimer).replace('DR_Others', othersName);
+            }
 
             lodash.forEach(col_n_keys, function (col_n_value, index) {
                 var agg = pivotData.getAggregator(row_n_value, col_n_value);
@@ -973,11 +976,12 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     trendSeries.color = colors[i];
                 }
 
-                chart_series.push(trendSeries);
+                trendSerieses.push(trendSeries);
             }
 
             i++;
         });
+        const ethalonSeries = chart_series[chart_series.length - 1];
 
         if (has_delta && additionOptions && additionOptions.delta_column.only_variant) {
             if (variat_serias)
@@ -996,10 +1000,19 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         }
 
-        highchartsRenderer.moveSeriesToSecondYAxisIfNeeded(chart_series, pivotData, chartOptions, additionOptions, opts);
+        opts.chart_series = []
+
+        if (!lodash.isEqual(row_n_keys, [[]])) {
+            chart_series.forEach(series => {
+                opts.chart_series.push(series.name);
+            })
+        }
 
         if (opts.total) {
-            const newSeries = lodash.clone(chart_series[chart_series.length - 1]);
+            const newSeries = lodash.clone(ethalonSeries);
+            if (opts.totalSeriesSettings) {
+                newSeries.yAxis = opts.totalSeriesSettings.secondaryAxis ? 1 : undefined;
+            }
             newSeries.name = 'Total';
             newSeries.data = [];
             col_n_keys.forEach(columnKey => {
@@ -1013,6 +1026,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             chart_series.push(newSeries);
         }
 
+        chart_series = [...chart_series, ...trendSerieses]
+
+        highchartsRenderer.moveSeriesToSecondYAxisIfNeeded(chart_series, pivotData, chartOptions, additionOptions, opts, opts.total && opts.totalSeriesSettings && opts.totalSeriesSettings.secondaryAxis);
+
         return chart_series;
     };
 
@@ -1033,6 +1050,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         var variat_serias = null;
         const n = col_n_keys.length;
         const xSum = (1 + n) / 2 * n;
+        const trendSerieses = [];
 
         lodash.forEach(row_n_keys, function (row_n_value) {
             let ySum = 0;
@@ -1040,8 +1058,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             let squareXSum = 0;
             var ob = {};
             ob.data = [];
-            if (row_n_value && row_n_value.length > 0)
-                ob.name = lodash.unescape(row_n_value.join(highchartsRenderer.delimer));
+            if (row_n_value && row_n_value.length > 0) {
+                let othersName = lodash.get(opts, "total_value_options.filter_options.filteredOutFieldName") || 'Others';
+                ob.name = lodash.unescape(row_n_value.join(highchartsRenderer.delimer).replace('DR_Others', othersName));
+            }
 
             ob.dataLabels = {
                 allowOverlap: additionOptions && additionOptions.label ? additionOptions.label.overlap : false,
@@ -1101,6 +1121,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
             chart_series.push(ob);
 
+
             if (opts.trendLine) {
                 const a = ((ySum * squareXSum) - (xSum * xySum)) / ((n * squareXSum) - (xSum * xSum));
                 const b = ((n * xySum) -  (xSum* ySum)) / ((n * squareXSum) - (xSum * xSum));
@@ -1115,11 +1136,13 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     trendSeries.color = colors[i];
                 }
 
-                chart_series.push(trendSeries);
+                trendSerieses.push(trendSeries);
             }
             i++;
         });
 
+        const ethalonSeries = chart_series[chart_series.length - 1];
+
         if (has_delta && additionOptions.delta_column.only_variant) {
             if (variat_serias)
                 return [variat_serias];
@@ -1128,42 +1151,38 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         }
 
-        highchartsRenderer.moveSeriesToSecondYAxisIfNeeded(chart_series, pivotData, chartOptions, additionOptions, opts);
-
         let weights = { line: 2,spline: 3 ,area:-2, areaspline: -1, scatter:4, column: 1 };
 
-        if (opts.comboOptions && chartType.includes('combo')) {
+        if (opts.comboOptions && chartType.includes('combo') && !lodash.isEqual(row_n_keys, [[]])) {
             chart_series.forEach((series, seriesIndex) => {
                 const savedSeriesOption = lodash.find(opts.comboOptions.seriesOptions, {series: series.name});
                 if (savedSeriesOption) {
-                    switch (savedSeriesOption.chartType) {
-                        case 'line-chart':
-                            series.type = 'line';
-                            break;
-                        case 'line-chart-smooth':
-                            series.type = 'spline';
-                            break;
-                        case 'area-chart':
-                            series.type = 'area';
-                            break;
-                        case 'area-chart-smooth':
-                            series.type = 'areaspline';
-                            break;
-                        case 'scatter-chart':
-                            series.type = 'scatter';
-                            break;
-                        case 'column-chart' || 'column-chart-stacked':
-                            delete series.type;
-                            break;
-                    }
-                } else if (seriesIndex === chart_series.length - 1 && !has_delta) {
+                    highchartsRenderer.setChartTypeBySeriesType(savedSeriesOption.chartType, series);
+                } else if (seriesIndex === chart_series.length - 1 && chart_series.length > 1 && !has_delta && !opts.total && !trendSerieses.length) {
                     series.type = 'line';
                 }
             });
         }
 
+        opts.chart_series = []
+
+        if (!lodash.isEqual(row_n_keys, [[]])) {
+            chart_series.forEach(series => {
+                opts.chart_series.push(series.name);
+            })
+        }
+
         if (opts.total) {
-            const totalSeries = lodash.clone(chart_series[chart_series.length - 1]);
+            const totalSeries = lodash.clone(ethalonSeries);
+            if (opts.totalSeriesSettings) {
+                if (chartType.includes('combo')) {
+                    highchartsRenderer.setChartTypeBySeriesType(opts.totalSeriesSettings.chartType, totalSeries);
+                }
+
+                totalSeries.yAxis = opts.totalSeriesSettings.secondaryAxis ? 1 : undefined;
+            } else if (chartType === 'combo-column-chart' || chartType === 'combo-stacked-chart') {
+                totalSeries.type = 'column';
+            }
             totalSeries.name = 'Total';
             totalSeries.data = [];
             col_n_keys.forEach(columnKey => {
@@ -1179,6 +1198,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             chart_series.push(totalSeries);
         }
 
+        chart_series = [...chart_series, ...trendSerieses];
+
+        highchartsRenderer.moveSeriesToSecondYAxisIfNeeded(chart_series, pivotData, chartOptions, additionOptions, opts, opts.total && opts.totalSeriesSettings && opts.totalSeriesSettings.secondaryAxis);
+
         chart_series.sort((a,b) => {
             return (weights[a.type] || 0) > (weights[b.type] || 0) ? 1 : (weights[a.type] || 0) < (weights[b.type] || 0) ? -1 : 0
         });
@@ -1186,6 +1209,22 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return chart_series;
     }
 
+    highchartsRenderer.setChartTypeBySeriesType = function (type, series) {
+        const types = {
+            'line-chart': 'line',
+            'line-chart-smooth': 'spline',
+            'area-chart': 'area',
+            'area-chart-smooth': 'areaspline',
+            'scatter-chart': 'scatter',
+        }
+
+        if (type === 'column-chart' || type === 'column-chart-stacked') {
+            delete series.type;
+        } else {
+            series.type = types[type]
+        }
+    }
+
     highchartsRenderer.getVariantSeries = function (series, delta_column_options) {
         const varianceColor = delta_column_options.color || highchartsRenderer.variance_color || Highcharts.getOptions().colors[7];
         series.name = delta_column_options.name.replace('_', '');
@@ -1357,7 +1396,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         });
     };
 
-    highchartsRenderer.moveSeriesToSecondYAxisIfNeeded = function(chartSeries, pivotData, chartOptions, additionOptions, opts) {
+    highchartsRenderer.moveSeriesToSecondYAxisIfNeeded = function(chartSeries, pivotData, chartOptions, additionOptions, opts, forceAddSecondaryAxis) {
         if (!opts || !opts.comboOptions) {
             return;
         }
@@ -1373,11 +1412,15 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         });
 
-        if (addSecondYAxis) {
+        if (addSecondYAxis || forceAddSecondaryAxis) {
             highchartsRenderer.addSecondYAxis(pivotData, chartOptions, additionOptions, opts);
         }
     }
 
+    highchartsRenderer.encodeHTMLBrackets = function (string) {
+        return string.replaceAll('<', '&lt;').replaceAll('>', '&gt;');
+    };
+
     highchartsRenderer.addSecondYAxis = function (pivotData, chartOptions, additionOptions, opts) {
         const varianceColor = (additionOptions && additionOptions.delta_column.color) || (highchartsRenderer && highchartsRenderer.variance_color) || Highcharts.getOptions().colors[7];
         let labels_formatter = opts.comboOptions.secondaryAxisSettings.is_percentage ?
@@ -1389,7 +1432,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             min: !isNaN(parseInt(opts.comboOptions.secondaryAxisSettings.min)) ? opts.comboOptions.secondaryAxisSettings.min : null,
             max: !isNaN(parseInt(opts.comboOptions.secondaryAxisSettings.max)) ? opts.comboOptions.secondaryAxisSettings.max : null,
             title: {
-                text: opts.comboOptions.secondaryAxisSettings.name,
+                text: highchartsRenderer.encodeHTMLBrackets(opts.comboOptions.secondaryAxisSettings.name),
                 style: {
                     color: varianceColor
                 }
@@ -3716,15 +3759,25 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     };
 
     highchartsRenderer.getNewAttrSortingForCol = function (pivotData, sortingOptions) {
-        let colAttrs, colKeys;
-        colAttrs = pivotData.colAttrs;
+        let rowAttrs, rowKeys, colKeys, colAttrs;
+        rowAttrs = pivotData.rowAttrs;
+        rowKeys = pivotData.rowKeys;
         colKeys = pivotData.colKeys;
+        colAttrs = pivotData.colAttrs;
+
+
         if (!colAttrs || colAttrs.length == 0) {
             return null;
         }
+
         let values_names_arr = [];
-        lodash.forEach(colKeys, function (val) {
-            let aggregator_subtotal = pivotData.getAggregator([], [val[0]]);
+        let keysArray = sortingOptions.field ? rowKeys : colKeys;
+
+        lodash.forEach(keysArray, function (val) {
+            let firstArray = sortingOptions.field ? [val[0]] : [];
+            let secondArray = sortingOptions.field ? sortingOptions.field.split(highchartsRenderer.delimer) : [val[0]];
+            let aggregator_subtotal = pivotData.getAggregator(firstArray, secondArray);
+
             if (aggregator_subtotal) {
                 let value_subtotal = aggregator_subtotal.value();
                 if (sortingOptions && sortingOptions.is_absolute && !isNaN(parseFloat(value_subtotal))) {
@@ -3743,19 +3796,28 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         // map only names
         let attr_sorted_values = lodash.map(values_names_arr, 'name');
-        return {name: colAttrs[0], values: attr_sorted_values};
+        return {name: sortingOptions.field ? rowAttrs[0] : colAttrs[0], values: attr_sorted_values};
     };
 
     highchartsRenderer.getNewAttrSortingForRow = function (pivotData, sortingOptions) {
-        let rowAttrs, rowKeys;
+        let rowAttrs, rowKeys, colKeys, colAttrs;
         rowAttrs = pivotData.rowAttrs;
         rowKeys = pivotData.rowKeys;
+        colKeys = pivotData.colKeys;
+        colAttrs = pivotData.colAttrs;
+
         if (!rowAttrs || rowAttrs.length == 0) {
             return null;
         }
+
         let values_names_arr = [];
-        lodash.forEach(rowKeys, function (val) {
-            let aggregator_subtotal = pivotData.getAggregator([val[0]], []);
+        let keysArray = sortingOptions.field ? colKeys : rowKeys;
+
+        lodash.forEach(keysArray, function (val) {
+            let firstArray = sortingOptions.field ? sortingOptions.field.split(highchartsRenderer.delimer) : [val[0]];
+            let secondArray = sortingOptions.field ? [val[0]] : [];
+            let aggregator_subtotal = pivotData.getAggregator(firstArray, secondArray);
+
             if (aggregator_subtotal) {
                 let value_subtotal = aggregator_subtotal.value();
                 if (sortingOptions && sortingOptions.is_absolute && !isNaN(parseFloat(value_subtotal))) {
@@ -3774,7 +3836,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         // map only names
         let attr_sorted_values = lodash.map(values_names_arr, 'name');
-        return {name: rowAttrs[0], values: attr_sorted_values};
+        return {name: sortingOptions.field ? colAttrs[0] : rowAttrs[0], values: attr_sorted_values};
     };
 
     highchartsRenderer.generateSortingFunctionByValues = function (sortingOptions, pivotData, opts) {
@@ -7085,12 +7147,18 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 return data_row[field_with_variant.name] == variance_config.name && data_row[field_for_sorting.name] != undefined;
             });
 
+            const sorting_variance = widget.options.total_value_options.sorting_variance === '' ? 'asc' : 'desc';
+
             if (widget.options.chartOptions.delta_column.sort_by_absolute_variance) {
                 data_sorted = lodash.sortBy(data_sorted, function (o) {
-                    return Math.abs(o[val_field.name]) * -1;
+                    if (sorting_variance === 'desc') {
+                        return Math.abs(o[val_field.name]) * -1;
+                    }
+
+                    return Math.abs(o[val_field.name]) * 1;
                 });
             } else {
-                data_sorted = lodash.orderBy(data_sorted, [val_field.name], ['desc']);
+                data_sorted = lodash.orderBy(data_sorted, [val_field.name], [sorting_variance]);
             }
 
             let values_for_sort = lodash.map(data_sorted, function (data_row) {