@datarailsshared/dr_renderer 1.2.436 → 1.2.437

package/package.json

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

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