@datarailsshared/dr_renderer 1.4.94 → 1.4.99

package/package.json

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

package/src/highcharts_renderer.js

@@ -1,9 +1,10 @@
 const helpers = require('./dr-renderer-helpers');
 const { DrGaugeChart, GAUGE_OPTIONS_DEFAULT } = require('./charts/dr_gauge_chart');
 const { DrDonutChart } = require('./charts/dr_donut_chart');
-const seriesPointStylesHelper= require('./seriesPointStyles-helper');
+const seriesPointStylesHelper = require('./seriesPointStyles-helper');
 const smartQueriesHelper = require('./smart_queries_helper');
-const {DrGaugeCategoriesSummaryChart} = require("./charts/dr_gauge_categories_summary_chart");
+const valueFormatter = require('./value.formatter');
+const { DrGaugeCategoriesSummaryChart } = require("./charts/dr_gauge_categories_summary_chart");
 const {
     TooMuchDataError,
     NoDataError,
@@ -611,7 +612,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     };
 
     //TODO No totals formatts
-    highchartsRenderer.defaultValueLabelsFormatter = function (pivotData, opts) {
+    highchartsRenderer.defaultValueLabelsFormatter = function (pivotData, opts, forcePercentage = false) {
+        const deltaColumn = lodash.get(opts, 'chartOptions.delta_column', null);
+        const isPercentage = deltaColumn && deltaColumn.is_percentage && deltaColumn.only_variant || forcePercentage;
+        
+        if (isPercentage) {
+            return highchartsRenderer.persantageValueLabelsFormatter(pivotData, opts);
+        }
+
         const labelOptions = lodash.get(opts.chartOptions, 'label') || lodash.get(opts.chartOptions, 'label_pie');
 
         return function () {
@@ -633,7 +641,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     highchartsRenderer.persantageValueLabelsFormatter = function (pivotData, opts) {
         var func = function () {
             var value = parseFloat(this.value);
-            return $.pivotUtilities.getFormattedNumber(value * 100, null, null) + "%";
+            return $.pivotUtilities.getFormattedNumber(value, null, null) + "%";
         };
         return func;
     };
@@ -692,6 +700,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         var func = function () {
             var value = parseFloat(this.y);
+
             if (pivotData) {
                 let series_name = highchartsRenderer.getSeriesNameInFormatterContext(this);
                 var rows = series_name.split(highchartsRenderer.delimer);
@@ -852,6 +861,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             const isTrendSeries = this.series.options.className === SERIES_CLASSNAMES.TREND_SERIES;
 
             var y = parseFloat(this.y);
+
             if (pivotData) {
                 let series_name = highchartsRenderer.getSeriesNameInFormatterContext(this);
                 var rows = series_name.split(highchartsRenderer.delimer);
@@ -879,6 +889,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 if (variant_name && rows && rows[0] && variant_name == rows[0]) {
                     rows[0] = variant_name_default_name;
                 }
+
                 try {
                     if (is_drill_down_pie && !highchartsRenderer.selfStartsWith(series_name,"Series ")) {
                         let temp = cols;
@@ -919,7 +930,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     }
 
                     var aggr = pivotData.getAggregator(rows, cols);
-
+                    
                     let formatted_value_to_return = $.pivotUtilities.getFormattedNumber(y, null, opts);
                     if (aggr.value() || isWaterfallBreakdown) {
                         formatted_value_to_return = $.pivotUtilities.getFormattedNumber(
@@ -1346,7 +1357,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
 
             if (has_delta && additionOptions && ob.name == additionOptions.delta_column.name) {
-                ob = highchartsRenderer.getVariantSeries(ob, additionOptions.delta_column);
+                ob = highchartsRenderer.getVariantSeries(ob, additionOptions.delta_column, pivotData);
                 variat_serias = ob;
             }
 
@@ -1554,7 +1565,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
 
             if (has_delta && row_n_value && row_n_value.some(val => val === additionOptions.delta_column.name)) {
-                ob = highchartsRenderer.getVariantSeries(ob, additionOptions.delta_column);
+                ob = highchartsRenderer.getVariantSeries(ob, additionOptions.delta_column, pivotData);
                 variat_serias = ob;
             }
 
@@ -1876,7 +1887,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }
     }
 
-    highchartsRenderer.getVariantSeries = function (series, delta_column_options) {
+    highchartsRenderer.getVariantSeries = function (series, delta_column_options, pivotData) {
         const varianceColor = delta_column_options.color || highchartsRenderer.variance_color || Highcharts.getOptions().colors[7];
         series.name = delta_column_options.name.replace('_', '');
         series.initialName = series.name;
@@ -1903,6 +1914,18 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         }
 
+        if (delta_column_options.is_percentage) {
+            lodash.forEach(series.data, function (it, index) {
+                if (pivotData.rowKeys && pivotData.rowKeys.length && pivotData.colKeys && pivotData.colKeys.length) {
+                    const agg = pivotData.getAggregator([pivotData.rowKeys[0]], pivotData.colKeys[index]);
+                    if (agg) {
+                        const baseValue = pivotData.getAggregator([pivotData.rowKeys[0]], pivotData.colKeys[index]).value();
+                        it.y = valueFormatter.getPercentageValue(it.y, baseValue);
+                    }
+                }
+            });
+        }
+
         if (delta_column_options.chart == 'line') {
             series.type = 'line';
             series.lineColor = varianceColor;
@@ -1949,7 +1972,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         } else if (delta_column_options.chart == 'spline') {
             series.color = varianceColor;
             series.type = 'spline'
-        }
+        } 
         return series;
     }
 
@@ -2107,9 +2130,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
     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 ?
-            highchartsRenderer.persantageValueLabelsFormatter(pivotData, opts) :
-            highchartsRenderer.defaultValueLabelsFormatter(pivotData, opts);
+        const forcePercentage = lodash.get(opts, 'comboOptions.secondaryAxisSettings.is_percentage', false);
 
         chartOptions.yAxis = [chartOptions.yAxis];
         chartOptions.yAxis[1] = {
@@ -2122,7 +2143,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 }
             },
             labels: {
-                formatter: labels_formatter,
+                formatter: highchartsRenderer.defaultValueLabelsFormatter(pivotData, opts, forcePercentage),
                 style: {
                     color: varianceColor
                 }
@@ -2518,7 +2539,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         var chartOptions = {};
         var rowAttrs = pivotData.rowAttrs;
         var colAttrs = pivotData.colAttrs;
-
         var additionOptions = opts.chartOptions ? opts.chartOptions : highchartsRenderer.getDefaultValueForChart('line-chart');
 
         chartOptions.chart = {
@@ -3309,6 +3329,37 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         var rowAttrs = pivotData.rowAttrs;
         var additionOptions = opts.chartOptions ? opts.chartOptions : highchartsRenderer.getDefaultValueForChart('bar-chart-stacked');
 
+        const isVarianceOnly = lodash.get(additionOptions, 'delta_column.only_variant', false);
+        const labelStyle = lodash.merge(
+            LABEL_DEFAULT_OPTIONS.style,
+            { color: lodash.get(additionOptions, `${ highchartsRenderer.getLabelOptionKey(additionOptions) }.font_color`) || LABEL_DEFAULT_OPTIONS.color },
+            highchartsRenderer.getDataLabelsStyle(additionOptions)
+        );
+
+        const stackLabelsFormatter = function() {
+            return function() {
+                if (this.total) {
+                    var total = parseFloat(this.total);
+                    var agg = pivotData.getAggregator([], []);
+                    if (agg) {
+                        return agg.format(total, true);
+                    } else {
+                        return total.toLocaleString();
+                    }
+                }
+                return '';
+            }
+        }
+
+        const dataLabelsFormatter = function() {
+            return function() {
+                const deltaColumnName = lodash.get(opts, 'chartOptions.delta_column.name', '');
+                const currentRowName = this.series && this.series.name ? String(this.series.name) : '';
+                const isVariance = currentRowName.replace('_', '').toLowerCase() === deltaColumnName.replace('_', '').toLowerCase();
+                return isVariance ? highchartsRenderer.defaultDataLabelFormatter(pivotData, opts).call(this) : '';
+            }
+        }
+
         chartOptions.chart = {
             type: 'bar',
             zoomType: 'x'
@@ -3324,27 +3375,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 text: additionOptions && additionOptions.axisY ? additionOptions.axisY.name : ''
             },
             stackLabels: {
-                enabled: additionOptions && additionOptions.label ? additionOptions.label.show : true,
-                formatter: function () {
-                    if (this.total) {
-                        var total = parseFloat(this.total);
-                        var agg = pivotData.getAggregator([], []);
-                        if (agg) {
-                            return agg.format(total, true);
-                        } else {
-                            return total.toLocaleString();
-                        }
-                    }
-                    return "";
-                },
-                style: lodash.merge(
-                    LABEL_DEFAULT_OPTIONS.style,
-                    {
-                        color: lodash.get(additionOptions, `${ highchartsRenderer.getLabelOptionKey(additionOptions) }.font_color`)
-                            || LABEL_DEFAULT_OPTIONS.color,
-                    },
-                    highchartsRenderer.getDataLabelsStyle(additionOptions)
-                ),
+                enabled: additionOptions && additionOptions.label && !isVarianceOnly ? additionOptions.label.show : false,
+                formatter: stackLabelsFormatter.call(this),
+                style: labelStyle
             },
             labels: {
                 formatter: highchartsRenderer.defaultValueLabelsFormatter(pivotData, opts)
@@ -3368,7 +3401,13 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         chartOptions.plotOptions = {
             series: {
                 animation: !disableAnimation,
-                stacking: 'normal'
+                stacking: 'normal',
+                dataLabels: {
+                    allowOverlap: additionOptions && additionOptions.label ? additionOptions.label.overlap : false,
+                    enabled: additionOptions && additionOptions.label ? additionOptions.label.show : false,
+                    formatter: dataLabelsFormatter.call(this),
+                    style: labelStyle
+                }
             }
         };
 
@@ -3405,7 +3444,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         const additionOptions = opts.chartOptions
             ? opts.chartOptions
             : highchartsRenderer.getDefaultValueForChart(highchartsRenderer.CHART_TYPES.WATERFALL_BREAKDOWN);
-
+        
         if (!highchartsRenderer.isSortingOnBackendEnabled) {
             pivotData.colKeys = lodash.map(lodash.keys(pivotData.colTotals), key => [key]);
         }
@@ -3801,12 +3840,18 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         number_format = this.widget_values_format;
                     }
 
+                    const aggregatorPercentageValue = valueFormatter.getAggregatorPercentageValueIfRequired(this.sum, render_options, data, rowKey, colKey);        
+                    if (aggregatorPercentageValue) {
+                        return aggregatorPercentageValue;
+                    }
+
                     number_format = highchartsRenderer.getCalculatedValueFormat(this.calculated_formats, rowKey, colKey) || number_format;
 
                     var formated_value = highchartsRenderer.formatValue('n', number_format, x);
 
-                    return formated_value && formated_value.hasOwnProperty('value') && formated_value.value != null ?
-                        formated_value.value : x.toLocaleString();
+                    return formated_value && formated_value.hasOwnProperty('value') && formated_value.value != null 
+                        ? formated_value.value 
+                        : x.toLocaleString();
                 },
                 numInputs: attr != null ? 0 : 1
             };
@@ -3869,6 +3914,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         return ''
                     }
 
+                    const aggregatorPercentageValue = valueFormatter.getAggregatorPercentageValueIfRequired(this.uniq, render_options, data, rowKey, colKey);        
+                    if (aggregatorPercentageValue) {
+                        return aggregatorPercentageValue;
+                    }
+
                     if (is_graph == true || only_formats == true) {
                         let number_format = this.widget_values_format || null;
                         let formated_value = highchartsRenderer.formatValue('n', number_format, x);
@@ -3956,6 +4006,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         number_format = this.widget_values_format;
                     }
 
+                    const aggregatorPercentageValue = valueFormatter.getAggregatorPercentageValueIfRequired(this.sum, render_options, data, rowKey, colKey);        
+                    if (aggregatorPercentageValue) {
+                        return aggregatorPercentageValue;
+                    }
+
                     number_format = highchartsRenderer.getCalculatedValueFormat(this.calculated_formats, rowKey, colKey) || number_format;
                     var formated_value = highchartsRenderer.formatValue('n', number_format, x)
 
@@ -4043,6 +4098,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         number_format = this.widget_values_format;
                     }
 
+                    const aggregatorPercentageValue = valueFormatter.getAggregatorPercentageValueIfRequired(this.val, render_options, data, rowKey, colKey);        
+                    if (aggregatorPercentageValue) {
+                        return aggregatorPercentageValue;
+                    }
+
                     number_format = highchartsRenderer.getCalculatedValueFormat(this.calculated_formats, rowKey, colKey) || number_format;
 
                     var formated_value = highchartsRenderer.formatValue('n', number_format, x)
@@ -4130,6 +4190,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         number_format = this.widget_values_format;
                     }
 
+                    const aggregatorPercentageValue = valueFormatter.getAggregatorPercentageValueIfRequired(this.val, render_options, data, rowKey, colKey);        
+                    if (aggregatorPercentageValue) {
+                        return aggregatorPercentageValue;
+                    }
+
                     number_format = highchartsRenderer.getCalculatedValueFormat(this.calculated_formats, rowKey, colKey) || number_format;
 
                     var formated_value = highchartsRenderer.formatValue('n', number_format, x)
@@ -4220,6 +4285,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         number_format = this.widget_values_format;
                     }
 
+                    const aggregatorPercentageValue = valueFormatter.getAggregatorPercentageValueIfRequired(this.sum, render_options, data, rowKey, colKey);        
+                    if (aggregatorPercentageValue) {
+                        return aggregatorPercentageValue;
+                    }
+
                     number_format = highchartsRenderer.getCalculatedValueFormat(this.calculated_formats, rowKey, colKey) || number_format;
 
                     var formated_value = highchartsRenderer.formatValue('n', number_format, x)
@@ -4769,6 +4839,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             dateValuesDictionary: pivotOptions ? pivotOptions.dateValuesDictionary : null,
             keysObject: pivotOptions ? pivotOptions.keysObject : null,
             isDrillDownDisabled: pivotOptions ? pivotOptions.isDrillDownDisabled : false,
+            pivotUiFnRemoved: pivotOptions ? pivotOptions.pivotUiFnRemoved : false,
         };
 
         if (!subopts.rendererOptions) {
@@ -5206,38 +5277,39 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 },
                 seriesOptions: []
             }
-            if (options.chartOptions && options.chartOptions.delta_column && options.chartOptions.delta_column.field === 'series') {
-                let deltaColumnSeries = {
-                    series: options.chartOptions.delta_column.name,
-                    secondaryAxis: !options.chartOptions.delta_column.same_yaxis,
-                };
-                switch (options.chartOptions.delta_column.chart) {
-                    case 'line':
-                        deltaColumnSeries.chartType = 'line-chart';
-                        break;
-                    case 'spline':
-                        deltaColumnSeries.chartType = 'line-chart-smooth';
-                        break;
-                    case 'area':
-                        deltaColumnSeries.chartType = 'area-chart';
-                        break;
-                    case 'areaspline':
-                        deltaColumnSeries.chartType = 'area-chart-smooth';
-                        break;
-                    case 'scatter':
-                        deltaColumnSeries.chartType = 'scatter-chart';
-                        break;
-                    case 'column':
-                        deltaColumnSeries.chartType = 'column-chart';
-                        break;
-                    default:
-                        deltaColumnSeries.chartType = 'scatter-chart';
-                        break;
-                }
-                options.comboOptions.seriesOptions.push(deltaColumnSeries);
-                options.comboOptions.secondaryAxisSettings.name = options.chartOptions.delta_column.name.replace('_', '');
-                options.comboOptions.secondaryAxisSettings.is_percentage = options.chartOptions.delta_column.is_percentage;
+        }
+        
+        if (options.chartOptions && options.chartOptions.delta_column && options.chartOptions.delta_column.field === 'series') {
+            let deltaColumnSeries = {
+                series: options.chartOptions.delta_column.name,
+                secondaryAxis: !options.chartOptions.delta_column.same_yaxis,
+            };
+            switch (options.chartOptions.delta_column.chart) {
+                case 'line':
+                    deltaColumnSeries.chartType = 'line-chart';
+                    break;
+                case 'spline':
+                    deltaColumnSeries.chartType = 'line-chart-smooth';
+                    break;
+                case 'area':
+                    deltaColumnSeries.chartType = 'area-chart';
+                    break;
+                case 'areaspline':
+                    deltaColumnSeries.chartType = 'area-chart-smooth';
+                    break;
+                case 'scatter':
+                    deltaColumnSeries.chartType = 'scatter-chart';
+                    break;
+                case 'column':
+                    deltaColumnSeries.chartType = 'column-chart';
+                    break;
+                default:
+                    deltaColumnSeries.chartType = 'scatter-chart';
+                    break;
             }
+            options.comboOptions.seriesOptions.push(deltaColumnSeries);
+            options.comboOptions.secondaryAxisSettings.name = options.chartOptions.delta_column.name.replace('_', '');
+            options.comboOptions.secondaryAxisSettings.is_percentage = options.chartOptions.delta_column.is_percentage;
         }
     };
 
@@ -10163,4 +10235,5 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     return highchartsRenderer;
 };
 
+
 module.exports = getHighchartsRenderer;