@datarailsshared/dr_renderer 1.3.25 → 1.3.27

package/package.json

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

package/src/charts/dr_donut_chart.js

@@ -1,3 +1,5 @@
+const helpers = require('./../dr-renderer-helpers');
+
 function DrDonutChart(highchartsRenderer, pivotData, opts, drilldownFunc, disableAnimation) {
     const additionOptions = opts.chartOptions
         ? opts.chartOptions
@@ -19,6 +21,7 @@ function DrDonutChart(highchartsRenderer, pivotData, opts, drilldownFunc, disabl
 
         config.series = highchartsRenderer.ptCreateSeriesToDrillDownChart(pivotData, config, additionOptions, opts);
         highchartsRenderer.setTitleAndSubTitle(config, opts, additionOptions);
+        helpers.disableLegendInteractionIfRequired(config, additionOptions);
         this.setDrilldownConfig(config);
 
         return config;
@@ -87,7 +90,10 @@ function DrDonutChart(highchartsRenderer, pivotData, opts, drilldownFunc, disabl
         const series = chart.series[0];
 
         const aggTotal = pivotData.getAggregator([], []);
-        const formattedValue = aggTotal.format(series.total, true);
+        const formattedValue =
+            additionOptions && additionOptions.customTotalValueFormatFn
+                ? additionOptions.customTotalValueFormatFn(series.total)
+                : aggTotal.format(series.total, true);
 
         if (totalLabel) {
             totalLabel.destroy();
@@ -124,7 +130,12 @@ function DrDonutChart(highchartsRenderer, pivotData, opts, drilldownFunc, disabl
         if (drilldownFunc) {
             chartConfig.drilldown = {};
         } else if (!pivotData.isDrillDownDisabled) {
-            chartConfig.drilldown = highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart(pivotData, chartConfig, additionOptions, opts);
+            chartConfig.drilldown = highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart(
+                pivotData,
+                chartConfig,
+                additionOptions,
+                opts,
+            );
         } else {
             chartConfig.drilldown = highchartsRenderer.getDataLabelsStylesForDrillDown(additionOptions);
         }

package/src/dr-renderer-helpers.js

@@ -1,3 +1,5 @@
+const _ = require('lodash');
+
 function backendSortingKeysAreNotEmpty(keys) {
     return !!keys && (!!keys.row_keys && !!keys.row_keys.length || !!keys.col_keys && !!keys.col_keys.length);
 }
@@ -48,6 +50,18 @@ function removeSVGTextCorrection(svgEl, corr = 'yCorr') {
     return svgEl;
 }
 
+function disableLegendInteractionIfRequired(chartOptions, additionOptions) {
+    const type = _.get(chartOptions, 'chart.type');
+    if (!type || !_.get(additionOptions, 'disable_legend_interaction')) return;
+
+    const legendItemClickFnPath = type === 'pie'
+        ? 'plotOptions.pie.point.events.legendItemClick'
+        : 'plotOptions.series.events.legendItemClick';
+
+    _.set(chartOptions, legendItemClickFnPath, () => false);
+    _.set(chartOptions, 'legend.itemStyle.cursor', 'default');
+}
+
 module.exports = {
     backendSortingKeysAreNotEmpty,
     capitalize,
@@ -55,4 +69,5 @@ module.exports = {
     isNumber,
     mergeDeep,
     removeSVGTextCorrection,
+    disableLegendInteractionIfRequired,
 }

package/src/highcharts_renderer.js

@@ -2203,6 +2203,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }];
         chartOptions.legend = highchartsRenderer.getOptionsForLegends(additionOptions, 1, false, true);
 
+        helpers.disableLegendInteractionIfRequired(chartOptions, additionOptions);
+
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
@@ -2418,6 +2420,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         else if (!pivotData.isDrillDownDisabled)
             chartOptions.drilldown = highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart(pivotData, chartOptions, additionOptions, opts);
 
+        helpers.disableLegendInteractionIfRequired(chartOptions, additionOptions);
+
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
 
     };
@@ -2531,6 +2535,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         if (opts.selectedPoint) {
             seriesPointStylesHelper.setInitialPointStyles(opts, chartOptions.series);
         }
+
+        helpers.disableLegendInteractionIfRequired(chartOptions, additionOptions);
+
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
@@ -2616,6 +2623,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             seriesPointStylesHelper.setInitialPointStyles(opts, chartOptions.series);
         }
 
+        helpers.disableLegendInteractionIfRequired(chartOptions, additionOptions);
+
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
@@ -2712,6 +2721,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         if (opts.selectedPoint) {
             seriesPointStylesHelper.setInitialPointStyles(opts, chartOptions.series);
         }
+
+        helpers.disableLegendInteractionIfRequired(chartOptions, additionOptions);
+
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
@@ -2799,6 +2811,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         if (opts.selectedPoint) {
             seriesPointStylesHelper.setInitialPointStyles(opts, chartOptions.series);
         }
+
+        helpers.disableLegendInteractionIfRequired(chartOptions, additionOptions);
+
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
@@ -2866,6 +2881,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         chartOptions.legend = highchartsRenderer.getOptionsForLegends(additionOptions, rowAttrs.length, false);
 
+        helpers.disableLegendInteractionIfRequired(chartOptions, additionOptions);
+
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
@@ -2983,6 +3000,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         chartOptions.legend = highchartsRenderer.getOptionsForLegends(additionOptions, rowAttrs.length, false);
 
         chartOptions.drilldown = highchartsRenderer.getDataLabelsStylesForDrillDown(additionOptions);
+
+        helpers.disableLegendInteractionIfRequired(chartOptions, additionOptions);
+
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
@@ -3128,7 +3148,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             seriesPointStylesHelper.setInitialPointStyles(opts, chartOptions.series);
         }
 
-        highchartsRenderer.handleGridLines(additionOptions, chartOptions)
+        highchartsRenderer.handleGridLines(additionOptions, chartOptions);
+
+        helpers.disableLegendInteractionIfRequired(chartOptions, additionOptions);
 
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
@@ -3217,6 +3239,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         highchartsRenderer.handleGridLines(additionOptions, chartOptions)
 
+        helpers.disableLegendInteractionIfRequired(chartOptions, additionOptions);
+
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
@@ -3297,6 +3321,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         if (opts.selectedPoint) {
             seriesPointStylesHelper.setInitialPointStyles(opts, chartOptions.series);
         }
+
+        helpers.disableLegendInteractionIfRequired(chartOptions, additionOptions);
+
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
@@ -3389,7 +3416,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         if (opts.selectedPoint) {
             seriesPointStylesHelper.setInitialPointStyles(opts, chartOptions.series);
         }
-        highchartsRenderer.handleGridLines(additionOptions, chartOptions)
+        highchartsRenderer.handleGridLines(additionOptions, chartOptions);
+
+        helpers.disableLegendInteractionIfRequired(chartOptions, additionOptions);
 
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
@@ -3514,6 +3543,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         if (opts.selectedPoint) {
             seriesPointStylesHelper.setInitialPointStyles(opts, chartOptions.series);
         }
+
+        helpers.disableLegendInteractionIfRequired(chartOptions, additionOptions);
+
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
@@ -3634,6 +3666,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             seriesPointStylesHelper.setInitialPointStyles(opts, chartOptions.series);
         }
 
+        helpers.disableLegendInteractionIfRequired(chartOptions, additionOptions);
+
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     }
 

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

@@ -147,4 +147,52 @@ describe('dr-renderer-helpers', () => {
             expect(svg.xCorr).toBe(0);
         });
     });
+
+    describe('disableLegendInteractionIfRequired', () => {
+        const notPieTypes = ['column', 'line', 'area', 'areaspline', 'scatter', 'spline', 'bar', 'waterfall'];
+
+        it('should not update legend settings', () => {
+            const chartOptionsMock = {
+                chart: {
+                    type: 'column',
+                },
+            };
+            const additionOptionsMock = {
+                disable_legend_interaction: false,
+            };
+            drRendererHelpers.disableLegendInteractionIfRequired(chartOptionsMock, additionOptionsMock);
+            expect(chartOptionsMock.plotOptions).toBeFalsy();
+            expect(chartOptionsMock.legend).toBeFalsy();
+        });
+
+        it('should update legend styles and set click event (for pie chart)', () => {
+            const chartOptionsMock = {
+                chart: {
+                    type: 'pie',
+                },
+            };
+            const additionOptionsMock = {
+                disable_legend_interaction: true,
+            };
+            drRendererHelpers.disableLegendInteractionIfRequired(chartOptionsMock, additionOptionsMock);
+            expect(chartOptionsMock.plotOptions.pie.point.events.legendItemClick).toEqual(jasmine.any(Function));
+            expect(chartOptionsMock.legend.itemStyle.cursor).toEqual('default');
+        });
+
+        notPieTypes.forEach((chartType) => {
+            it(`should update legend styles and set click event (for ${ chartType } chart)`, () => {
+                const chartOptionsMock = {
+                    chart: {
+                        type: chartType,
+                    },
+                };
+                const additionOptionsMock = {
+                    disable_legend_interaction: true,
+                };
+                drRendererHelpers.disableLegendInteractionIfRequired(chartOptionsMock, additionOptionsMock);
+                expect(chartOptionsMock.plotOptions.series.events.legendItemClick).toEqual(jasmine.any(Function));
+                expect(chartOptionsMock.legend.itemStyle.cursor).toEqual('default');
+            });
+        });
+    });
 });