@datarailsshared/dr_renderer 1.2.434 → 1.2.437

package/package.json

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

package/src/dataformatter.js

@@ -350,7 +350,7 @@ var DataFormatterImpl = function () {
 
             n = this.roundDecimals(n, decimals).toString().split('.');
             var integerPart = n[0];
-            var decimalPart = n[1] || 0;
+            var decimalPart = String(n[1] || 0).padEnd(decimals, '0');
 
             return this.applyNumberPattern(integerPart, patternIntegerPart) + this.locale.decimalSeparator + this.applyNumberPattern(decimalPart, patternDecimalPart, n[1] && n[1][0] == '0' ? '' : 'right');
         }

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)',
@@ -2530,6 +2531,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 +2643,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 +2727,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 +2824,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 +2911,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 +3005,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         drilldownFunc(e, this, "drillup");
 
                 }
-
             }
         };
         if (disableAnimation) {
@@ -3066,8 +3079,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 +3091,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 +3239,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 +3408,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 +3501,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 +3626,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 +3745,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         }
 
+        if (opts.selectedPoint) {
+            seriesPointStylesHelper.setInitialPointStyles(opts, chartOptions.series);
+        }
+
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     }
 
@@ -5933,22 +5966,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/highcharts_renderer.test.js

@@ -2376,14 +2376,14 @@ describe('highcharts_renderer', () => {
 
                     it('Should return widget format if it\'s graph', () => {
                         aggregatorObject.widget_values_format = '\"$\"#,###.###';
-                        expect(aggregatorObject.format(2, false)).toBe('$2.0');
+                        expect(aggregatorObject.format(2, false)).toBe('$2.000');
                     });
 
                     it('Should return widget format if it\'s only_formats', () => {
                         aggregator = highchartsRenderer.rhPivotAggregatorUniqValues(arg, widget_values_format, false, render_options, calculated_info);
                         aggregatorObject = aggregator({}, '', '');
                         aggregatorObject.widget_values_format = '\"$\"#,###.###';
-                        expect(aggregatorObject.format(2, true)).toBe('$2.0');
+                        expect(aggregatorObject.format(2, true)).toBe('$2.000');
                     });
 
                     it('Should return uniq values if it\'s table and not only_formats', () => {
@@ -4731,7 +4731,7 @@ describe('highcharts_renderer', () => {
             };
             const type = 'colFormats';
             const formattedKey = highchartsRenderer.getFormattedKey(initialKey, pivotData, type);
-            expect(formattedKey).toEqual(['$1000.0']);
+            expect(formattedKey).toEqual(['$1000.00']);
         });
 
         it('should return properly formatted rowKey as array', () => {
@@ -4743,7 +4743,7 @@ describe('highcharts_renderer', () => {
             };
             const type = 'rowFormats';
             const formattedKey = highchartsRenderer.getFormattedKey(initialKey, pivotData, type);
-            expect(formattedKey).toEqual(['$1000.0']);
+            expect(formattedKey).toEqual(['$1000.00']);
         });
 
         it('should return properly formatted colKey as string', () => {
@@ -4755,7 +4755,7 @@ describe('highcharts_renderer', () => {
             };
             const type = 'colFormats';
             const formattedKey = highchartsRenderer.getFormattedKey(initialKey, pivotData, type);
-            expect(formattedKey).toEqual('$1000.0');
+            expect(formattedKey).toEqual('$1000.00');
         });
 
         it('should return properly formatted rowKey as string', () => {
@@ -4767,7 +4767,7 @@ describe('highcharts_renderer', () => {
             };
             const type = 'rowFormats';
             const formattedKey = highchartsRenderer.getFormattedKey(initialKey, pivotData, type);
-            expect(formattedKey).toEqual('$1000.0');
+            expect(formattedKey).toEqual('$1000.00');
         });
 
         it('should return formatted multivalue colKey as string', () => {
@@ -4778,7 +4778,7 @@ describe('highcharts_renderer', () => {
             };
             const type = 'colFormats';
             const formattedKey = highchartsRenderer.getFormattedKey(initialKey, pivotData, type);
-            expect(formattedKey).toEqual('$1000.0 , ₪2000.0');
+            expect(formattedKey).toEqual('$1000.00 , ₪2000.00');
         });
 
         it('should return formatted multivalue colKey as array', () => {
@@ -4789,7 +4789,7 @@ describe('highcharts_renderer', () => {
             };
             const type = 'colFormats';
             const formattedKey = highchartsRenderer.getFormattedKey(initialKey, pivotData, type);
-            expect(formattedKey).toEqual(['$1000.0', '₪2000.0']);
+            expect(formattedKey).toEqual(['$1000.00', '₪2000.00']);
         });
 
         it('should return not formatted second value (test as array)', () => {
@@ -4800,7 +4800,7 @@ describe('highcharts_renderer', () => {
             };
             const type = 'colFormats';
             const formattedKey = highchartsRenderer.getFormattedKey(initialKey, pivotData, type);
-            expect(formattedKey).toEqual(['$1000.0', '2000']);
+            expect(formattedKey).toEqual(['$1000.00', '2000']);
         });
 
         it('should return not formatted first value (test as array)', () => {
@@ -4811,7 +4811,7 @@ describe('highcharts_renderer', () => {
             };
             const type = 'colFormats';
             const formattedKey = highchartsRenderer.getFormattedKey(initialKey, pivotData, type);
-            expect(formattedKey).toEqual(['1000', '$2000.0']);
+            expect(formattedKey).toEqual(['1000', '$2000.00']);
         });
 
         describe('formatting Dates', () => {
@@ -4906,7 +4906,7 @@ describe('highcharts_renderer', () => {
             const isCols = true;
             const formattedKeys = highchartsRenderer.getFormattedKeys(pivotData, isCols, null);
             expect(formattedKeys).toEqual(
-                [['$1.0', '₪11.0'], ['$2.0', '₪32.0'], ['[null]', '₪43.0'], ['$5.0', '₪54.0'], ['Others', '₪33.0'], ['$6.0', '₪98.0']]
+                [['$1.00', '₪11.00'], ['$2.00', '₪32.00'], ['[null]', '₪43.00'], ['$5.00', '₪54.00'], ['Others', '₪33.00'], ['$6.00', '₪98.00']]
             );
         });
 
@@ -4915,7 +4915,7 @@ describe('highcharts_renderer', () => {
             const isCols = true;
             const formattedKeys = highchartsRenderer.getFormattedKeys(pivotData, isCols, null);
             expect(formattedKeys).toEqual(
-                [['1', '₪11.0'], ['2', '₪32.0'], ['[null]', '₪43.0'], ['5', '₪54.0'], ['Others', '₪33.0'], ['6', '₪98.0']]
+                [['1', '₪11.00'], ['2', '₪32.00'], ['[null]', '₪43.00'], ['5', '₪54.00'], ['Others', '₪33.00'], ['6', '₪98.00']]
             );
         });
 
@@ -4924,7 +4924,7 @@ describe('highcharts_renderer', () => {
             const isCols = true;
             const formattedKeys = highchartsRenderer.getFormattedKeys(pivotData, isCols, null);
             expect(formattedKeys).toEqual(
-                [['$1.0', '11'], ['$2.0', '32'], ['[null]', '43'], ['$5.0', '54'], ['Others', '33'], ['$6.0', '98']]
+                [['$1.00', '11'], ['$2.00', '32'], ['[null]', '43'], ['$5.00', '54'], ['Others', '33'], ['$6.00', '98']]
             );
         });
 
@@ -4933,7 +4933,7 @@ describe('highcharts_renderer', () => {
             const isCols = false;
             const formattedKeys = highchartsRenderer.getFormattedKeys(pivotData, isCols, null);
             expect(formattedKeys).toEqual(
-                [['$1.0', '₪11.0'], ['$2.0', '₪32.0'], ['[null]', '₪43.0'], ['$5.0', '₪54.0'], ['Others', '₪33.0'], ['$6.0', '₪98.0']]
+                [['$1.00', '₪11.00'], ['$2.00', '₪32.00'], ['[null]', '₪43.00'], ['$5.00', '₪54.00'], ['Others', '₪33.00'], ['$6.00', '₪98.00']]
             );
         });
 
@@ -4942,7 +4942,7 @@ describe('highcharts_renderer', () => {
             const isCols = false;
             const formattedKeys = highchartsRenderer.getFormattedKeys(pivotData, isCols, null);
             expect(formattedKeys).toEqual(
-                [['1', '₪11.0'], ['2', '₪32.0'], ['[null]', '₪43.0'], ['5', '₪54.0'], ['Others', '₪33.0'], ['6', '₪98.0']]
+                [['1', '₪11.00'], ['2', '₪32.00'], ['[null]', '₪43.00'], ['5', '₪54.00'], ['Others', '₪33.00'], ['6', '₪98.00']]
             );
         });
 
@@ -4951,7 +4951,7 @@ describe('highcharts_renderer', () => {
             const isCols = false;
             const formattedKeys = highchartsRenderer.getFormattedKeys(pivotData, isCols, null);
             expect(formattedKeys).toEqual(
-                [['$1.0', '11'], ['$2.0', '32'], ['[null]', '43'], ['$5.0', '54'], ['Others', '33'], ['$6.0', '98']]
+                [['$1.00', '11'], ['$2.00', '32'], ['[null]', '43'], ['$5.00', '54'], ['Others', '33'], ['$6.00', '98']]
             );
         });
     });
@@ -5390,11 +5390,11 @@ describe('highcharts_renderer', () => {
             const formatCases = [
                 {
                     format: '$"#,###.##',
-                    expected: '$12,345.0'
+                    expected: '$12,345.00'
                 },
                 {
                     format: '%"#,###.##',
-                    expected: '%1,234,500.0'
+                    expected: '%1,234,500.00'
                 },
                 {
                     format: '#,###',
@@ -5429,7 +5429,7 @@ describe('highcharts_renderer', () => {
             const tooltipHtml = tooltipFunction.call(displayTooltipContext);
             
             expect(tooltipHtml).toEqual(
-                '<br/><span style="font-weight: bold; color: green;">\u200Erow 1</span>: <span>\u200E$12,345.0</span>'
+                '<br/><span style="font-weight: bold; color: green;">\u200Erow 1</span>: <span>\u200E$12,345.00</span>'
             );
         });
 
@@ -5443,7 +5443,7 @@ describe('highcharts_renderer', () => {
             expect(tooltipHtml).toEqual(
                 `<span style="font-weight: bold;">
                         col 1  
-                    </span><br/><span style="font-weight: bold; color: green;">\u200Erow 1</span>: <span>\u200E$12,345.0</span>`
+                    </span><br/><span style="font-weight: bold; color: green;">\u200Erow 1</span>: <span>\u200E$12,345.00</span>`
                     + '<br/>% Out of Axis (Category): 10%'
             );
         });
@@ -5458,7 +5458,7 @@ describe('highcharts_renderer', () => {
             expect(tooltipHtml).toEqual(
                 `<span style="font-weight: bold;">
                         col 1  
-                    </span><br/><span style="font-weight: bold; color: green;">\u200Erow 1</span>: <span>\u200E$12,345.0</span>`
+                    </span><br/><span style="font-weight: bold; color: green;">\u200Erow 1</span>: <span>\u200E$12,345.00</span>`
                     + '<br/>% Out of Legend (Series): 1%'
             );
         });
@@ -5474,7 +5474,7 @@ describe('highcharts_renderer', () => {
             expect(tooltipHtml).toEqual(
                 `<span style="font-weight: bold;">
                         col 1  
-                    </span><br/><span style="font-weight: bold; color: green;">\u200Erow 1</span>: <span>\u200E$12,345.0</span>`
+                    </span><br/><span style="font-weight: bold; color: green;">\u200Erow 1</span>: <span>\u200E$12,345.00</span>`
                 + '<br/>% Out of Axis (Category): 10%, % Out of Legend (Series): 1%'
             );
         });
@@ -5494,7 +5494,7 @@ describe('highcharts_renderer', () => {
             expect(tooltipHtml).toEqual(
                 `<span style="font-weight: bold;">
                         col 1  
-                    </span><br/><span style="font-weight: bold; color: green;">\u200Erow 1</span>: <span>\u200E$12,345.0</span>`
+                    </span><br/><span style="font-weight: bold; color: green;">\u200Erow 1</span>: <span>\u200E$12,345.00</span>`
                     + '<br/>% Out of X-AXIS: 10%, % Out of DATA-SERIES: 1%'
             );
         });
@@ -5510,7 +5510,7 @@ describe('highcharts_renderer', () => {
             expect(tooltipHtml).toEqual(
                 `<span style="font-weight: bold;">
                         col 1,col 2  
-                    </span><br/><span style="font-weight: bold; color: green;">\u200Erow 1</span>: <span>\u200E$54,321.0</span>`
+                    </span><br/><span style="font-weight: bold; color: green;">\u200Erow 1</span>: <span>\u200E$54,321.00</span>`
             );
         });
 
@@ -5525,7 +5525,7 @@ describe('highcharts_renderer', () => {
             expect(tooltipHtml).toEqual(
                 `<span style="font-weight: bold;">
                         col 1  
-                    </span><br/><span style="font-weight: bold; color: green;">\u200Erow 1 , row 2</span>: <span>\u200E$11,111.0</span>`
+                    </span><br/><span style="font-weight: bold; color: green;">\u200Erow 1 , row 2</span>: <span>\u200E$11,111.00</span>`
             );
         });
 
@@ -5539,7 +5539,7 @@ describe('highcharts_renderer', () => {
             expect(tooltipHtml).toEqual(
                 `<span style="font-weight: bold;">
                         ${ othersName }  
-                    </span><br/><span style="font-weight: bold; color: green;">\u200Erow 1</span>: <span>\u200E$99,999.0</span>`
+                    </span><br/><span style="font-weight: bold; color: green;">\u200Erow 1</span>: <span>\u200E$99,999.00</span>`
             );
         });
 
@@ -5569,7 +5569,7 @@ describe('highcharts_renderer', () => {
             expect(tooltipHtml).toEqual(
                 `<span style="font-weight: bold;">
                         row 1 : 
-                    </span><span>\u200E$12,345.0</span>`
+                    </span><span>\u200E$12,345.00</span>`
             );
         });
 
@@ -5599,7 +5599,7 @@ describe('highcharts_renderer', () => {
             expect(tooltipHtml).toEqual(
                 `<span style="font-weight: bold;">
                         col 1 : 
-                    </span><span>\u200E$88,888.0</span>`
+                    </span><span>\u200E$88,888.00</span>`
             );
         });
 
@@ -5631,7 +5631,7 @@ describe('highcharts_renderer', () => {
             expect(tooltipHtml).toEqual(
                 `<span style="font-weight: bold;">
                         Total 1  
-                    </span>: <span>\u200E$100.0</span>`
+                    </span>: <span>\u200E$100.00</span>`
             );
         });
 
@@ -5653,7 +5653,7 @@ describe('highcharts_renderer', () => {
                 highchartsRenderer.defaultFormatterToTooltip(pivotDataMock, optsMock, isForDrilldownPie);
             const tooltipHtml = tooltipFunction.call(displayTooltipContext);
             
-            expect(tooltipHtml).toEqual('<span>\u200E$123,450.0</span>');
+            expect(tooltipHtml).toEqual('<span>\u200E$123,450.00</span>');
         });
 
         it('should return proper tooltip html (for trendline point)', () => {
@@ -5675,7 +5675,7 @@ describe('highcharts_renderer', () => {
             
             expect(tooltipHtml).toEqual(`<span style="font-weight: bold;">
                         col 1  
-                    </span><br/><span style="font-weight: bold; color: green;">\u200ETrend Line</span>: <span>\u200E$55,555.0</span>`
+                    </span><br/><span style="font-weight: bold; color: green;">\u200ETrend Line</span>: <span>\u200E$55,555.00</span>`
             );
         });
     });

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'
+                        }
+                    }
+                }
+            )
+        );
+    });
+});