@datarailsshared/dr_renderer 1.3.26 → 1.3.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datarailsshared/dr_renderer",
-  "version": "1.3.26",
+  "version": "1.3.30",
   "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;

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/dr_pivottable.js

@@ -514,8 +514,8 @@ let initDRPivotTable = function($, window, document) {
         isColHideOnExpand = (ref5 = opts.colSubtotalDisplay) != null ? ref5.hideOnExpand : !opts.chartOptions.table_options.show_subtotals_for_columns;
         isColDisableExpandCollapse = (ref6 = opts.colSubtotalDisplay) != null ? ref6.disableExpandCollapse : void 0;
         colDisableAfter = (ref7 = opts.colSubtotalDisplay) != null ? ref7.disableAfter != null ? ref7.disableAfter : ref7.disableAfter = 9999 : void 0;
-        arrowCollapsed = opts.arrowCollapsed != null ? opts.arrowCollapsed : opts.arrowCollapsed = '<i class="fa fa-plus dr-icon-add"></i> ';
-        arrowExpanded = opts.arrowExpanded != null ? opts.arrowExpanded : opts.arrowExpanded = '<i class="fa fa-minus dr-icon-minus"></i> ';
+        arrowCollapsed = opts.arrowCollapsed != null ? opts.arrowCollapsed : opts.arrowCollapsed = '<i class="dr-icon-add"></i> ';
+        arrowExpanded = opts.arrowExpanded != null ? opts.arrowExpanded : opts.arrowExpanded = '<i class="dr-icon-minus"></i> ';
         colAttrs = pivotData.colAttrs;
         rowAttrs = pivotData.rowAttrs;
         rowKeys = pivotData.getRowKeys();
@@ -2476,7 +2476,12 @@ let initDRPivotTable = function($, window, document) {
             }
 
             if (tooMuch) {
-                const defaultPlaceholder = $('<div class="noData"><i class="fa fa-info"></i> There are too many rows to display in the table.<br>Please filter or change the table type in options.</div>');
+                const defaultPlaceholder = $(`
+                        <div class="noData--table-many-rows">
+                            <span><i class="noData-icon dr-icon-info"></i> There are too many rows to display in the table.</span>
+                            <span>Please filter or change the table type in options.</span>
+                        </div>
+                `);
 
                 resultsArr.push($.pivotUtilities.errorHandling.getErrorPlaceholder(error_params) || defaultPlaceholder);
             } else {

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);
     }
 
@@ -4260,7 +4294,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         let ret_str = '';
         if (options && options.total_value_options && options.total_value_options.filter_options && options.total_value_options.filter_options.axis == tr_axis) {
             //TODO add tooltip with description of filter
-            ret_str += '<i class="fa fa-filter"></i>';
+            ret_str += '<i class="dr-icon-filter-old"></i>';
         }
 
         return ret_str;

package/src/pivot.css

@@ -5,6 +5,17 @@
   flex-direction: column;
 }
 
+.pivot-wrapper .noData--table-many-rows {
+    display: flex;
+    flex-direction: column;
+}
+.pivot-wrapper .noData--table-many-rows > *:first-child {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 25px;
+}
+
 table.pvtTable {
     font-size: 8pt;
     text-align: left;
@@ -228,16 +239,27 @@ table.pvtTable.newPvtTable thead tr th {
   border-right: 1px solid #fff;
 }
 
-table.pvtTable.newPvtTable thead tr th .fa,
-table.pvtTable.newPvtTable thead tr th .dr-icon-add,
-table.pvtTable.newPvtTable thead tr th .dr-icon-minus {
-  padding: 2px;
-  background-color: #ffffff;
-  border-radius: 2px;
-  margin-right: 2px;
-  margin-left: 1px;
-  font-size: 8px;
-  color: #151a41;
+table.pvtTable.newPvtTable thead tr th i,
+table.pvtTable.newPvtTable tbody tr th i {
+    position: relative;
+    bottom: -1px;
+    background-color: #ffffff;
+    border-radius: 2px;
+    margin-right: 2px;
+    margin-left: 1px;
+    font-weight: bold;
+    font-size: 10px;
+    color: #151a41;
+}
+
+table.pvtTable.newPvtTable tbody tr th i {
+    bottom: -2px;
+    background-color: #dfe6ec;
+}
+
+table.pvtTable.newPvtTable thead tr th .dr-icon-filter-old,
+table.pvtTable.newPvtTable tbody tr th .dr-icon-filter-old {
+    font-weight: normal;
 }
 
 table.pvtTable.newPvtTable.colorized tr th.colTotal,
@@ -261,14 +283,6 @@ table.pvtTable.newPvtTable tbody tr td.rowTotal {
   border-color: #ffffff !important;
 }
 
-table.pvtTable.newPvtTable tbody tr th .fa {
-  padding: 2px;
-  background-color: #dfe6ec;
-  border-radius: 2px;
-  margin-right: 2px;
-  font-size: 8px;
-}
-
 table.pvtTable.newPvtTable tbody tr th,
 table.pvtTable.newPvtTable tbody tr td {
   border: 1px solid #dfe6ec;

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

package/tests/highcharts_renderer.test.js

@@ -917,7 +917,7 @@ describe('highcharts_renderer', () => {
 
         it('should return filter icon for matching axis', () => {
             const axis = 'row'
-            const expected = '<i class="fa fa-filter"></i>'
+            const expected = '<i class="dr-icon-filter-old"></i>'
             const result = highchartsRenderer.getIconsForTotalOptions(options, axis)
             expect(result).toEqual(expected)
         });