@datarailsshared/dr_renderer 1.2.436 → 1.2.438

package/package.json

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

package/src/dr_pivottable.js

@@ -396,13 +396,10 @@ let initDRPivotTable = function($, window, document) {
             switch (opts.chartOptions.negative_numbers.value) {
                 case 'red_minus':
                     return '<span style="color: red; fill: red;">' + aggregator.format(val, format_argument) + '</span>';
-                    break;
                 case 'absolute':
                     return '(' + aggregator.format(Math.abs(val), format_argument) + ')';
-                    break;
                 case 'red_absolute':
                     return '<span style="color: red; fill: red;">(' + aggregator.format(Math.abs(val), format_argument) + ')</span>';
-                    break;
                 default:
                     return aggregator.format(val, format_argument);
             }

package/src/highcharts_renderer.js

@@ -1,4 +1,5 @@
 const helpers = require('./dr-renderer-helpers');
+const seriesPointStylesHelper= require('./seriesPointStyles-helper')
 
 const mobileBrowserRegex = new RegExp([
     '(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)',
@@ -406,6 +407,20 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         ].includes(type);
     };
 
+    /**
+     * @param {String} value 
+     * @param {{ useUnitAbbreviation: boolean } labelOptions 
+     * @returns {String}
+     */
+    const removeNumberFormatValueUnitSign = (value, labelOptions) => {
+        const removeUnitAbbreviation = labelOptions && !lodash.isNil(labelOptions.useUnitAbbreviation) && !labelOptions.useUnitAbbreviation;
+        if (!removeUnitAbbreviation || !value || typeof value !== 'string') {
+            return value;
+        }
+        const unitsAbbr = /[KM]/gi;
+        return value.replace(unitsAbbr, '');
+    }
+
     highchartsRenderer.filterFloat = function (value) {
         if (/^(\-|\+)?([0-9]+(\.[0-9]+)?|Infinity)$/.test(value))
             return Number(value);
@@ -541,19 +556,22 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
     //TODO No totals formatts
     highchartsRenderer.defaultValueLabelsFormatter = function (pivotData, opts) {
-        var func = function () {
-            var value = parseFloat(this.value);
-            if (pivotData) {
-                try {
-                    var aggr = pivotData.getAggregator([], []);
-                    return $.pivotUtilities.getFormattedNumber(value, aggr, opts, true);
-                } catch (err) {
-                    // do nothing
-                }
-            }
-            return $.pivotUtilities.getFormattedNumber(value, null, opts);
+        const labelOptions = lodash.get(opts.chartOptions, 'label') || lodash.get(opts.chartOptions, 'label_pie');
+
+        return function () {
+            const value = parseFloat(this.value);
+            try {
+                const aggr = pivotData ? pivotData.getAggregator([], []) : null;
+                let formattedValue = $.pivotUtilities.getFormattedNumber(value, aggr, opts, !!aggr);
+                formattedValue = removeNumberFormatValueUnitSign(formattedValue, labelOptions);
+                return formattedValue;
+            } catch (err) {
+                // do nothing
+            }
+            let formattedValue =  $.pivotUtilities.getFormattedNumber(value, null, opts);
+            formattedValue = removeNumberFormatValueUnitSign(formattedValue, labelOptions);
+            return formattedValue;
         };
-        return func;
     };
 
     highchartsRenderer.persantageValueLabelsFormatter = function (pivotData, opts) {
@@ -700,14 +718,17 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
                     var aggr = pivotData.getAggregator(rows, cols);
 
-                    const formattedValue = is_drill_down_pie || labelOptions.show_value ? $.pivotUtilities.getFormattedNumber(value, aggr, opts, true) : '';
+                    let formattedValue = is_drill_down_pie || labelOptions.show_value ? $.pivotUtilities.getFormattedNumber(value, aggr, opts, true) : '';
+                    formattedValue = removeNumberFormatValueUnitSign(formattedValue, labelOptions);
                     return String(formattedValue) + percentageWrapper;
 
                 } catch (err) {
                     // do nothing
                 }
             }
-            return $.pivotUtilities.getFormattedNumber(value, null, opts).replace(/\u00A0/g, " ");
+            let formattedValue = $.pivotUtilities.getFormattedNumber(value, null, opts).replace(/\u00A0/g, " "); 
+            formattedValue = removeNumberFormatValueUnitSign(formattedValue, labelOptions);
+            return formattedValue;
         };
         return func;
     };
@@ -2530,6 +2551,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         chartOptions.series = highchartsRenderer.ptCreateSeriesToDrillDownChart(pivotData, chartOptions, additionOptions, opts);
         chartOptions.legend = highchartsRenderer.getOptionsForLegends(additionOptions, 1, false, true);
+        chartOptions.drilldown = highchartsRenderer.getDataLabelsStylesForDrillDown(additionOptions);
         if (drilldownFunc)
             chartOptions.drilldown = {}
         else if (!pivotData.isDrillDownDisabled)
@@ -2641,6 +2663,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, additionOptions, opts, chartOptions);
 
         highchartsRenderer.handleGridLines(additionOptions, chartOptions)
+        if (opts.selectedPoint) {
+            seriesPointStylesHelper.setInitialPointStyles(opts, chartOptions.series);
+        }
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
@@ -2722,6 +2747,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, colors, null, null, additionOptions, opts, chartOptions);
 
         highchartsRenderer.handleGridLines(additionOptions, chartOptions)
+        if (opts.selectedPoint) {
+            seriesPointStylesHelper.setInitialPointStyles(opts, chartOptions.series);
+        }
 
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
@@ -2816,6 +2844,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, additionOptions, opts, chartOptions);
 
         highchartsRenderer.handleGridLines(additionOptions, chartOptions);
+        if (opts.selectedPoint) {
+            seriesPointStylesHelper.setInitialPointStyles(opts, chartOptions.series);
+        }
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
@@ -2900,6 +2931,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         chartOptions.legend = highchartsRenderer.getOptionsForLegends(additionOptions, rowAttrs.length, false);
 
+        if (opts.selectedPoint) {
+            seriesPointStylesHelper.setInitialPointStyles(opts, chartOptions.series);
+        }
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
@@ -2991,7 +3025,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         drilldownFunc(e, this, "drillup");
 
                 }
-
             }
         };
         if (disableAnimation) {
@@ -3066,8 +3099,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 }
             }
         };
-
         if (opts.drillDownListFunc) {
+            chartOptions.plotOptions.series = {
+                animation: !disableAnimation,
+            };
             chartOptions.plotOptions.series.cursor = 'pointer';
             chartOptions.plotOptions.series.point = {
                 events: {
@@ -3076,6 +3111,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             };
         }
         chartOptions.plotOptions.series = highchartsRenderer.getDataLabelsOptions(additionOptions, chartOptions.plotOptions.series);
+        
+        if (opts.selectedPoint) {
+            seriesPointStylesHelper.setInitialPointStyles(opts, chartOptions.series);
+        }
         chartOptions.legend = highchartsRenderer.getOptionsForLegends(additionOptions, rowAttrs.length, false);
 
         chartOptions.drilldown = highchartsRenderer.getDataLabelsStylesForDrillDown(additionOptions);
@@ -3220,6 +3259,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }
         chartOptions.series = highchartsRenderer.ptCreateColumnSeries(pivotData, chartOptions.colors, null, true, true, additionOptions, opts, chartOptions, chartType);
         //chartOptions.drilldown = {}
+        if (opts.selectedPoint) {
+            seriesPointStylesHelper.setInitialPointStyles(opts, chartOptions.series);
+        }
 
         highchartsRenderer.handleGridLines(additionOptions, chartOptions)
 
@@ -3386,9 +3428,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 }
             };
         }
-
         chartOptions.legend = highchartsRenderer.getOptionsForLegends(additionOptions, rowAttrs.length, false);
-
+        if (opts.selectedPoint) {
+            seriesPointStylesHelper.setInitialPointStyles(opts, chartOptions.series);
+        }
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
@@ -3478,6 +3521,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
         chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, null, opts, chartOptions);
 
+        if (opts.selectedPoint) {
+            seriesPointStylesHelper.setInitialPointStyles(opts, chartOptions.series);
+        }
         highchartsRenderer.handleGridLines(additionOptions, chartOptions)
 
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
@@ -3600,6 +3646,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             formatter: highchartsRenderer.getBreakdownXAxisLabelFormatter(chartOptions.series),
         };
 
+        if (opts.selectedPoint) {
+            seriesPointStylesHelper.setInitialPointStyles(opts, chartOptions.series);
+        }
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
@@ -3716,6 +3765,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         }
 
+        if (opts.selectedPoint) {
+            seriesPointStylesHelper.setInitialPointStyles(opts, chartOptions.series);
+        }
+
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     }
 
@@ -4930,9 +4983,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             //subopts.rendererOptions = { tableOptions: { showTotals: false } };
         }
 
-        if (is_graph)
+        if (is_graph) {
             subopts.renderer = pivotOptions.chartRender;
-        else {
+            subopts.rendererOptions.chartOptions.label.useUnitAbbreviation = subopts.rendererOptions.useUnitAbbreviation;
+        } else {
             var functionToReturn = function (pivotData, opt) {
                 opt.widgetId = widget.id;
                 return $.pivotUtilities.subtotal_renderers(pivotData, opt, widget.chart_type);
@@ -5933,22 +5987,28 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         if (fnToReturn == null)
             fnToReturn = highchartsRenderer.ptRenderBasicLine;
 
-        var fnunctionToReturn = function (pivotData, opt) {
+        return function(pivotData, opt) {
             if (drillDownListFunc) {
                 if (!opt) {
                     opt = {};
                 }
-                opt.drillDownListFunc = (e) => {
-                    highchartsRenderer.modifyEventPointForDrilldown(e);
-                    drillDownListFunc(e);
-                };
+                if (opt.isUpdatingPointStylesOnClick) {
+                    opt.drillDownListFunc = (e) => {
+                        seriesPointStylesHelper.setSeriesPointStylesOnClick(e);
+                        highchartsRenderer.modifyEventPointForDrilldown(e);
+                        drillDownListFunc(e);
+                    };
+                } else {
+                    opt.drillDownListFunc = (e) => {
+                        highchartsRenderer.modifyEventPointForDrilldown(e);
+                        drillDownListFunc(e);
+                    };
+                }
             } else {
                 opt.drillDownListFunc = null;
             }
-            return fnToReturn(pivotData, opt, drilldownFunc, newChartType); //todo pass drilldownFunc
+            return fnToReturn(pivotData, opt, drilldownFunc, newChartType);
         };
-
-        return fnunctionToReturn;
     };
 
     highchartsRenderer.getAggregatorFunctionById = function (aggrigatorId) {

package/src/seriesPointStyles-helper.js

@@ -0,0 +1,43 @@
+function getSeriesPointStyles(isSelected) {
+    return {
+        opacity: isSelected ? 1 : 0.1,
+        marker: {
+            enabled: true,
+            radius: isSelected ? 8 : 3,
+        },
+        dataLabels: {
+            style: {
+                fontWeight: isSelected ? "bold" : "normal",
+            },
+        },
+    };
+}
+
+function setSeriesPointStylesOnClick(e) {
+    const selectedPoint = e.point;
+    e.point.series.chart.series.forEach((series) =>
+        series.points.forEach((point) => {
+            point.update(getSeriesPointStyles(point === selectedPoint), false);
+        })
+    );
+    e.point.series.chart.redraw();
+}
+
+function setInitialPointStyles(opts, series) {
+    series.forEach((series) => {
+        if (Array.isArray(series.data)) {
+            series.data.forEach((item) => {
+                const isSelected =
+                    item && opts.selectedPoint &&
+                    item.initialName === opts.selectedPoint.initialName &&
+                    item.y === opts.selectedPoint.y;
+                item = Object.assign(item, getSeriesPointStyles(isSelected));
+            });
+        }
+    });
+}
+
+module.exports = {
+    setSeriesPointStylesOnClick,
+    setInitialPointStyles,
+};

package/tests/dr-renderer-helpers.test.js

@@ -1,6 +1,7 @@
 import drRendererHelpers from '../src/dr-renderer-helpers';
 
 describe('dr-renderer-helpers', () => {
+
     describe('backendSortingKeysAreNotEmpty', () => {
         it('should return true if keys are not empty', () => {
             const keys = {

package/tests/seriesPointStyles-helper.test.js

@@ -0,0 +1,114 @@
+import seriesPointStylesHelper from '../src/seriesPointStyles-helper';
+
+describe('setSeriesPointStylesOnClick', () => {
+    it('should update point styles on click and update other points to non-selected styles on click', () => {
+        const selectedPoint = {
+            update: jest.fn(),
+            series: {
+                chart: {
+                    series: [{ points: [] }],
+                    redraw: jest.fn()
+                }
+            }
+        };
+
+        const otherPoint = {
+            update: jest.fn(),
+            series: selectedPoint.series
+        };
+
+        selectedPoint.series.chart.series[0].points.push(selectedPoint, otherPoint);
+
+        const mockEvent = { point: selectedPoint };
+
+        seriesPointStylesHelper.setSeriesPointStylesOnClick(mockEvent);
+
+        expect(selectedPoint.update).toHaveBeenCalledWith(
+            {
+                opacity: 1,
+                marker: {
+                    enabled: true,
+                    radius: 8
+                },
+                dataLabels: {
+                    style: {
+                        fontWeight: 'bold'
+                    }
+                }
+            },
+            false
+        );
+        expect(otherPoint.update).toHaveBeenCalledWith(
+            {
+                opacity: 0.1,
+                marker: {
+                    enabled: true,
+                    radius: 3
+                },
+                dataLabels: {
+                    style: {
+                        fontWeight: 'normal'
+                    }
+                }
+            },
+            false
+        );
+        expect(selectedPoint.series.chart.redraw).toHaveBeenCalled();
+    });
+});
+
+describe('setInitialPointStyles', () => {
+    it('should set initial point styles based on selection', () => {
+        const opts = { selectedPoint: { initialName: 'point1', y: 10 } };
+        const mockPoint = { initialName: 'point1', y: 10 };
+        const mockSeries = { data: [mockPoint] };
+        const series = [mockSeries];
+
+        seriesPointStylesHelper.setInitialPointStyles(opts, series);
+
+        expect(mockPoint).toEqual(
+            Object.assign(
+                mockPoint,
+                {
+                    opacity: 1,
+                    marker: {
+                        enabled: true,
+                        radius: 8
+                    },
+                    dataLabels: {
+                        style: {
+                            fontWeight: 'bold'
+                        }
+                    }
+                }
+            )
+        );
+    });
+
+    it('should not set styles if point is not selected', () => {
+        const opts = { selectedPoint: { initialName: 'point1', y: 10 } };
+        const mockPoint = { initialName: 'point2', y: 20 };
+        const mockSeries = { data: [mockPoint] };
+        const series = [mockSeries];
+
+        seriesPointStylesHelper.setInitialPointStyles(opts, series);
+
+        expect(mockPoint).toEqual(
+            Object.assign(
+                mockPoint,
+                {
+                    opacity: 0.1,
+                    marker: {
+                        enabled: true,
+                        radius: 3
+                    },
+                    dataLabels: {
+                        style: {
+                            fontWeight: 'normal'
+                        }
+                    }
+                }
+            )
+        );
+    });
+});