@datarailsshared/dr_renderer 1.3.27 → 1.3.31

package/package.json

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

package/src/charts/dr_gauge_categories_summary_chart.js

@@ -0,0 +1,323 @@
+const _ = require('lodash');
+const helpers = require("../dr-renderer-helpers");
+const {DrGaugeChart} = require("./dr_gauge_chart");
+
+const GAUGE_CATEGORIES_SUMMARY_OPTIONS_DEFAULT = {
+    gauge: {
+        background: "#fff",
+        startAngle: -90,
+        endAngle: 90,
+        thickness: 17,
+        tickLength: 0,
+        tickWidth: 0,
+        valueOffset: [0, 0, 0, 0],
+        offset: [12, 8, 12, 8],
+        goalIcon: '',
+        goalIconSize: [0, 0],
+        pivot: {
+            radius: 0,
+            color: "#808080",
+        },
+        colors: {
+            meta: "#333",
+            goal: "#4646CE",
+        },
+    },
+    goal: {
+        title: "Goal",
+        value: 1000000,
+    },
+    isAbsoluteValue: false,
+    segments: [
+        {
+            title: 'Completed',
+            count: 0,
+            isCompletionParameter: true,
+            color: '#037C5A',
+        },
+        {
+            title: 'Overdue',
+            count: 0,
+            color: '#BF1D30',
+        },
+        {
+            title: 'Pending',
+            count: 0,
+            color: '#FFA310',
+        },
+        {
+            title: 'Remaining',
+            count: 0,
+            color: '#F0F1F4',
+        }],
+};
+
+function DrGaugeCategoriesSummaryChart(pivotData, opts) {
+    this.completionPercentage = 0;
+
+    this.render = function () {
+        return DrGaugeChart.highchartsRenderer.ptCreateElementAndDraw(this.configChart(), opts);
+    };
+
+    this.createPlotBands = function (options) {
+        const {
+            segments,
+            goal: { value: goalValue },
+            gauge: { thickness },
+        } = options;
+
+        let bands = segments.map((item, index) => {
+            return {
+                from: item.from,
+                to: item.to,
+                color: item.color,
+                thickness: thickness,
+                title: item.title,
+            };
+        });
+
+        if (bands.length === 0) {
+            bands = [
+                {
+                    from: 0,
+                    to: 100,
+                    color: '#F0F1F4',
+                    thickness: thickness,
+                    title: 'None',
+                }
+            ]
+        }
+
+        // clamp last segment
+        bands[bands.length - 1].to = Math.max(bands[bands.length - 1].to, goalValue);
+
+        return bands;
+    };
+
+    this.getDefaultValueForChart = function (type, existing_options) {
+        return DrGaugeChart.highchartsRenderer.getDefaultValueForChart(type, existing_options);
+    };
+
+    this.mergeOptions = function (options) {
+        return helpers.mergeDeep(
+            JSON.parse(JSON.stringify(GAUGE_CATEGORIES_SUMMARY_OPTIONS_DEFAULT)),
+            this.getDefaultValueForChart(DrGaugeChart.highchartsRenderer.CHART_TYPES.GAUGE_CHART_CATEGORIES_SUMMARY),
+            options
+        );
+    };
+
+    this.prepareSegments = function (options) {
+        let segmentsSumAggregator = 0;
+        let segmentsOutput = [];
+        for (let i = 0; i < options.segments.length; i++) {
+            let currentSegment = options.segments[i];
+            segmentsOutput.push(
+                {
+                    from: segmentsSumAggregator,
+                    to: segmentsSumAggregator += currentSegment.count,
+                    color: currentSegment.color,
+                    name: currentSegment.title,
+                }
+            );
+        }
+        segmentsOutput = segmentsOutput.filter(
+            (segment) => {
+                return segment.from !== segment.to;
+            }
+        );
+        options.segments = segmentsOutput;
+        options.goal = {
+            title: '',
+            value: segmentsSumAggregator,
+        };
+    }
+
+    this.getCompletionPercentage = function (options) {
+        const countOfCompletedItems = options.segments.find(segment => !!segment.isCompletionParameter)?.count || 0;
+        const totalCount = options.segments.reduce((acc, segment) => acc + segment.count, 0);
+        if (totalCount === 0) {
+            return 0;
+        }
+        return Math.round(countOfCompletedItems / totalCount * 100);
+    }
+
+    this.clampValueToPane = function (value, max = this.max, min = this.min) {
+        const correction = Math.abs(max - min) * 0.02;
+        return helpers.clamp(min - correction, value, max + correction);
+    };
+
+
+    this.formatValueLabel = function (value, options) {
+        return `<span style="display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: ${
+            options.label.font_size
+        }px;">
+            <span style="font-weight: 600; font-size: 1.5em; line-height: 1; color: ${options.label.font_color}">
+                ${this.completionPercentage}%
+            </span>
+            <span style="font-weight: 600; font-size: 0.75em; line-height: 1; color: ${
+            options.gauge.colors.meta
+        };">Completed</span>
+        </span>`;
+    };
+
+    this.clampValueToPane = function (value, max = this.max, min = this.min) {
+        const correction = Math.abs(max - min) * 0.02;
+        return helpers.clamp(min - correction, value, max + correction);
+    };
+
+    this.createValueLabel = function (chart, options) {
+        const label = chart.renderer.text(this.formatValueLabel(this.value, options), 0, 0, true).add().toFront();
+
+        helpers.removeSVGTextCorrection(label, "yCorr");
+
+        label.attr(DrGaugeChart.getValueLabelPosition(chart, options)).css({
+            transform: "translateX(-50%) translateY(-100%)",
+        });
+
+        return label;
+    };
+
+
+    this.getPaneDimensions = function (chart, options) {
+        const {renderer} = chart;
+        const {offset} = options.gauge;
+
+        const offsetBottom = options.gauge.valueOffset[0] + options.gauge.valueOffset[2] + offset[2];
+
+        const radiuses = [chart.chartWidth / 2 - Math.max(offset[1], offset[3]), chart.chartHeight - offsetBottom - offset[0]];
+
+        radiuses.push((chart.chartWidth / 2 - offset[1]) / Math.sin(Math.abs(Math.PI / 2)));
+        radiuses.push((chart.chartHeight - offsetBottom - offset[0]) / Math.cos(Math.abs(Math.PI / 2)));
+
+        return {
+            radius: Math.min(...radiuses),
+            center: [chart.chartWidth / 2, chart.chartHeight - offsetBottom],
+        };
+    };
+
+    this.setPane = function (chart, options) {
+        const {radius, center} = this.getPaneDimensions(chart, options);
+        chart.pane[0].options.size = 2 * radius;
+        chart.pane[0].options.center = center;
+        chart.yAxis[0].options.plotBands.forEach((band) => {
+            band.outerRadius = radius - (options.gauge.tickLength - options.gauge.thickness) / 2;
+        });
+    };
+
+    this.setCustomElements = function (chart, options) {
+        chart.label = this.createValueLabel(chart, options);
+        chart.startBorder = DrGaugeChart.createBorder(chart, options, "start");
+        chart.endBorder = DrGaugeChart.createBorder(chart, options, "end");
+    };
+
+    this.updateCustomElements = function (chart, options) {
+        chart.startBorder.attr(DrGaugeChart.getBorderPosition(chart, options, "start"));
+        chart.endBorder.attr(DrGaugeChart.getBorderPosition(chart, options, "end"));
+        chart.label.attr(DrGaugeChart.getValueLabelPosition(chart, options));
+    };
+
+    this.moveCustomElementsToFront = function (chart) {
+        chart.startBorder.toFront();
+        chart.endBorder.toFront();
+    };
+
+    this.configChart = function () {
+        return {
+            title: {
+                text: null,
+            },
+            subtitle: null,
+            exporting: {
+                allowHTML: true,
+            },
+            tooltip: {
+                enabled: false,
+            },
+            chart: {
+                type: "gauge",
+                backgroundColor: this.options.gauge.background,
+                plotBackgroundColor: null,
+                plotBackgroundImage: null,
+                plotBorderWidth: 0,
+                plotShadow: false,
+                events: {
+                    render: ({target: chart}) => {
+                        this.moveCustomElementsToFront(chart);
+                    },
+                    beforeRedraw: ({target: chart}) => {
+                        this.setPane(chart, this.options);
+                        this.updateCustomElements(chart, this.options);
+                    },
+                    beforeRender: ({target: chart}) => {
+                        this.setPane(chart, this.options);
+                        this.setCustomElements(chart, this.options);
+                    }
+                },
+                margin: [0, 0, 0, 0],
+                spacing: [0, 0, 0, 0],
+            },
+
+            pane: {
+                startAngle: -90,
+                endAngle: 90,
+                background: null,
+                center: [0, 0],
+            },
+
+            // the value axis
+            yAxis: {
+                min: this.min,
+                max: this.max,
+                tickPositions: this.ticks,
+                tickPosition: "inside",
+                tickColor: this.options.gauge.background,
+                tickLength: this.options.gauge.tickLength,
+                tickWidth: this.options.gauge.tickWidth,
+                minorTickInterval: null,
+                labels: {
+                    enabled: false
+                },
+                lineWidth: 0,
+                plotBands: this.plotBands,
+            },
+
+            series: [
+                {
+                    name: null,
+                    data: [this.clampValueToPane(this.value)],
+                    dataLabels: [
+                        {
+                            enabled: false,
+                        },
+                    ],
+                    dial: {
+                        radius: "0",
+                        backgroundColor: "rgba(0, 0, 0, 0)",
+                        baseWidth: 2 * this.options.gauge.pivot.radius,
+                        baseLength: "0%",
+                        rearLength: "0%",
+                    },
+                    pivot: {
+                        backgroundColor: "rgba(0, 0, 0, 0)",
+                        radius: this.options.gauge.pivot.radius,
+                    },
+                },
+            ],
+        };
+    };
+
+
+    this.options = this.mergeOptions(opts.chartOptions);
+    this.completionPercentage = this.getCompletionPercentage(this.options);
+    this.prepareSegments(this.options);
+    this.aggregation = pivotData.getAggregator([], []);
+    this.format = this.aggregation.widget_values_format;
+    this.goal = this.options.goal;
+    this.plotBands = this.createPlotBands(this.options);
+    this.ticks = DrGaugeChart.createTicks(this.plotBands, this.options);
+    this.value = DrGaugeChart.getValue(pivotData, opts);
+    this.max = this.ticks[this.ticks.length - 1];
+    this.min = this.ticks[0];
+}
+
+module.exports = {DrGaugeCategoriesSummaryChart, GAUGE_CATEGORIES_SUMMARY_OPTIONS_DEFAULT};

package/src/charts/dr_gauge_chart.js

@@ -84,34 +84,7 @@ function DrGaugeChart(pivotData, opts) {
         return (value - min) < (max - min) / 2;
     };
 
-    this.createPlotBands = function (options) {
-        const {
-            segments,
-            isAbsoluteValue,
-            goal: { value: goalValue },
-            gauge: { thickness },
-        } = options;
-
-        const bands = segments.map((item, index) => {
-            const itemFrom = !!index ? item.from - 1 : item.from;
-            return {
-                from: isAbsoluteValue ? itemFrom : (itemFrom * goalValue) / 100,
-                to: isAbsoluteValue ? item.to : (item.to * goalValue) / 100,
-                color: item.color,
-                thickness: thickness,
-                title: item.title,
-            };
-        });
-
-        // clamp last segment
-        bands[bands.length - 1].to = Math.max(bands[bands.length - 1].to, goalValue);
-
-        return bands;
-    };
-
-    this.createTicks = function (plotBands, options) {
-        return _.uniq([plotBands[0].from || 0, ...plotBands.map((b) => b.to), options.goal.value]).sort((a, b) => a - b);
-    };
+    this.createTicks = DrGaugeChart.createTicks;
 
     this.mergeOptions = function (options) {
         return helpers.mergeDeep(
@@ -148,16 +121,16 @@ function DrGaugeChart(pivotData, opts) {
             <span style="font-weight: 600; font-size: 1.3em; line-height: 1; color: ${options.label.font_color}">
                 ${this.formatValue(value)}
                 ${
-                    options.label.show_percentage_in_value
-                        ? `<span style="font-size: 0.5833em; font-weight: 600; color: ${
-                              options.gauge.colors.meta
-                          };">(${this.toPercent(value)})</span>`
-                        : ""
-                }
+            options.label.show_percentage_in_value
+                ? `<span style="font-size: 0.5833em; font-weight: 600; color: ${
+                    options.gauge.colors.meta
+                };">(${this.toPercent(value)})</span>`
+                : ""
+        }
             </span>
             <span style="font-weight: 500; font-size: 0.875em; line-height: 1; color: ${
-                options.gauge.colors.meta
-            };">Current status</span>
+            options.gauge.colors.meta
+        };">Current status</span>
         </span>`;
     };
 
@@ -176,8 +149,8 @@ function DrGaugeChart(pivotData, opts) {
                 : "";
         const percentage = options.label.show_percentage_in_segments
             ? `<span style="font-size: 0.75em; color: ${options.gauge.colors.meta}; font-weight: 400;">(${this.toPercent(
-                  value
-              )})</span>`
+                value
+            )})</span>`
             : "";
 
         return `<span style="
@@ -194,67 +167,6 @@ function DrGaugeChart(pivotData, opts) {
         </span>`;
     };
 
-    this.getValue = function (pivotData, opts) {
-        const lineSeries = this.ptCreateBasicLineSeries(pivotData, null, true, null, null, opts, {});
-
-        let total = _.flatten(lineSeries
-            .map((s) => s.data.map((v) => v))
-            .filter((v) => !_.isNaN(v))
-        );
-
-        let aggfunc = (a, b) => a + b;
-        let base = 0;
-        let singleValueAgg = this.getSingleValueAgg(
-            {
-                value: {
-                    value: "Sum",
-                },
-            },
-            aggfunc,
-            base
-        );
-
-        aggfunc = singleValueAgg.aggfunc;
-        base = singleValueAgg.base;
-
-        const aggregator = pivotData.getAggregator([], []);
-        const value = total.length > 0 ? total.reduce(aggfunc, base) : aggregator.value();
-
-        return value;
-    };
-
-    this.getBorderPosition = function (chart, options, position) {
-        const { center, size } = chart.pane[0].options;
-        const {
-            gauge: { tickLength, tickWidth },
-        } = options;
-
-        return {
-            x: position === "start" ? center[0] - size / 2 + tickLength / 2 : center[0] + size / 2 - tickLength / 2,
-            y: center[1] + tickWidth / 2,
-        };
-    };
-
-    this.createBorder = function (chart, options, position) {
-        return chart.renderer
-            .arc(
-                Object.assign(this.getBorderPosition(chart, options, position), {
-                    r: options.gauge.thickness / 2,
-                    innerR: 0,
-                    start: 0,
-                    end: Math.PI,
-                })
-            )
-            .attr({
-                fill:
-                    position === "start"
-                        ? chart.yAxis[0].options.plotBands[0].color
-                        : chart.yAxis[0].options.plotBands.slice(-1)[0].color,
-            })
-            .add()
-            .toFront();
-    };
-
     this.getGoalIconPosition = function (chart, options) {
         const { center, size } = chart.pane[0].options;
         const radius = size / 2;
@@ -277,20 +189,12 @@ function DrGaugeChart(pivotData, opts) {
             .toFront();
     };
 
-    this.getValueLabelPosition = function (chart, options) {
-        const { center } = chart.pane[0].options;
-        return {
-            x: center[0],
-            y: center[1] + options.gauge.valueOffset[0],
-        };
-    };
-
     this.createValueLabel = function (chart, options) {
         const label = chart.renderer.text(this.formatValueLabel(this.value, options), 0, 0, true).add().toFront();
 
         helpers.removeSVGTextCorrection(label, "yCorr");
 
-        label.attr(this.getValueLabelPosition(chart, options)).css({
+        label.attr(DrGaugeChart.getValueLabelPosition(chart, options)).css({
             transform: "translateX(-50%)",
         });
 
@@ -314,12 +218,12 @@ function DrGaugeChart(pivotData, opts) {
                 // depends on label width
                 radiuses.push(
                     (chart.chartWidth / 2 - label.bBox.width - Math.max(offset[1], offset[3])) /
-                        Math.sin(Math.abs(Math.PI / 2 - angle))
+                    Math.sin(Math.abs(Math.PI / 2 - angle))
                 );
                 // depends on label height
                 radiuses.push(
                     (chart.chartHeight - offsetBottom - label.bBox.height / 2 - offset[0]) /
-                        Math.cos(Math.abs(Math.PI / 2 - angle))
+                    Math.cos(Math.abs(Math.PI / 2 - angle))
                 );
                 label.destroy();
             });
@@ -361,7 +265,7 @@ function DrGaugeChart(pivotData, opts) {
 
         // If goal is hidden, we need to always show goal and hide the closest visible label before it
         this.updateLabelsWhenGoalIsHidden(ticks, options);
-        
+
     };
 
     this.updateLabelsWhenGoalIsHidden = function (ticks, options) {
@@ -461,16 +365,41 @@ function DrGaugeChart(pivotData, opts) {
 
     this.setCustomElements = function (chart, options) {
         chart.label = this.createValueLabel(chart, options);
-        chart.startBorder = this.createBorder(chart, options, "start");
-        chart.endBorder = this.createBorder(chart, options, "end");
+        chart.startBorder = DrGaugeChart.createBorder(chart, options, "start");
+        chart.endBorder = DrGaugeChart.createBorder(chart, options, "end");
         chart.goalIcon = this.createGoalIcon(chart, options);
     };
 
     this.updateCustomElements = function (chart, options) {
-        chart.startBorder.attr(this.getBorderPosition(chart, options, "start"));
-        chart.endBorder.attr(this.getBorderPosition(chart, options, "end"));
+        chart.startBorder.attr(DrGaugeChart.getBorderPosition(chart, options, "start"));
+        chart.endBorder.attr(DrGaugeChart.getBorderPosition(chart, options, "end"));
         chart.goalIcon.attr(this.getGoalIconPosition(chart, options));
-        chart.label.attr(this.getValueLabelPosition(chart, options));
+        chart.label.attr(DrGaugeChart.getValueLabelPosition(chart, options));
+    };
+
+    this.createPlotBands = function (options) {
+        const {
+            segments,
+            isAbsoluteValue,
+            goal: { value: goalValue },
+            gauge: { thickness },
+        } = options;
+
+        const bands = segments.map((item, index) => {
+            const itemFrom = !!index ? item.from - 1 : item.from;
+            return {
+                from: isAbsoluteValue ? itemFrom : (itemFrom * goalValue) / 100,
+                to: isAbsoluteValue ? item.to : (item.to * goalValue) / 100,
+                color: item.color,
+                thickness: thickness,
+                title: item.title,
+            };
+        });
+
+        // clamp last segment
+        bands[bands.length - 1].to = Math.max(bands[bands.length - 1].to, goalValue);
+
+        return bands;
     };
 
     this.moveCustomElementsToFront = function (chart) {
@@ -593,9 +522,98 @@ function DrGaugeChart(pivotData, opts) {
     this.goal = this.options.goal;
     this.plotBands = this.createPlotBands(this.options);
     this.ticks = this.createTicks(this.plotBands, this.options);
-    this.value = this.getValue(pivotData, opts);
+    this.value = DrGaugeChart.getValue(pivotData, opts);
     this.max = this.ticks[this.ticks.length - 1];
     this.min = this.ticks[0];
 }
 
+DrGaugeChart.createTicks = function (plotBands, options) {
+    return _.uniq([plotBands[0].from || 0, ...plotBands.map((b) => b.to), options.goal.value]).sort((a, b) => a - b);
+};
+
+DrGaugeChart.getBorderPosition  = function (chart, options, position) {
+    const { center, size } = chart.pane[0].options;
+    const {
+        gauge: { tickLength, tickWidth },
+    } = options;
+
+    return {
+        x: position === "start" ? center[0] - size / 2 + tickLength / 2 : center[0] + size / 2 - tickLength / 2,
+        y: center[1] + tickWidth / 2,
+    };
+};
+
+DrGaugeChart.createBorder = function (chart, options, position) {
+    return chart.renderer
+        .arc(
+            Object.assign(DrGaugeChart.getBorderPosition(chart, options, position), {
+                r: options.gauge.thickness / 2,
+                innerR: 0,
+                start: 0,
+                end: Math.PI,
+            })
+        )
+        .attr({
+            fill:
+                position === "start"
+                    ? chart.yAxis[0].options.plotBands[0].color
+                    : chart.yAxis[0].options.plotBands.slice(-1)[0].color,
+        })
+        .add()
+        .toFront();
+};
+
+DrGaugeChart.getValueLabelPosition = function (chart, options) {
+    const { center } = chart.pane[0].options;
+    return {
+        x: center[0],
+        y: center[1] + options.gauge.valueOffset[0],
+    };
+};
+
+DrGaugeChart.ptCreateBasicLineSeries = function (pivotData, colors, onlyNumbers, isUniqueVals, additionOptions, opts, chartOptions) {
+    return DrGaugeChart.highchartsRenderer.ptCreateBasicLineSeries(
+        pivotData,
+        colors,
+        onlyNumbers,
+        isUniqueVals,
+        additionOptions,
+        opts,
+        chartOptions
+    );
+};
+
+DrGaugeChart.getSingleValueAgg = function (opts, aggfunc, base) {
+    return DrGaugeChart.highchartsRenderer.getSingleValueAgg(opts, aggfunc, base);
+};
+
+DrGaugeChart.getValue = function (pivotData, opts) {
+    const lineSeries = DrGaugeChart.ptCreateBasicLineSeries(pivotData, null, true, null, null, opts, {});
+
+    let total = _.flatten(lineSeries
+        .map((s) => s.data.map((v) => v))
+        .filter((v) => !_.isNaN(v))
+    );
+
+    let aggfunc = (a, b) => a + b;
+    let base = 0;
+    let singleValueAgg = DrGaugeChart.getSingleValueAgg(
+        {
+            value: {
+                value: "Sum",
+            },
+        },
+        aggfunc,
+        base
+    );
+
+    aggfunc = singleValueAgg.aggfunc;
+    base = singleValueAgg.base;
+
+    const aggregator = pivotData.getAggregator([], []);
+    const value = total.length > 0 ? total.reduce(aggfunc, base) : aggregator.value();
+
+    return value;
+};
+
 module.exports = { DrGaugeChart, GAUGE_OPTIONS_DEFAULT };

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

@@ -2,6 +2,7 @@ const helpers = require('./dr-renderer-helpers');
 const { DrGaugeChart, GAUGE_OPTIONS_DEFAULT } = require('./charts/dr_gauge_chart');
 const { DrDonutChart } = require('./charts/dr_donut_chart');
 const seriesPointStylesHelper= require('./seriesPointStyles-helper');
+const {DrGaugeCategoriesSummaryChart} = require("./charts/dr_gauge_categories_summary_chart");
 
 const mobileBrowserRegex = new RegExp([
     '(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)',
@@ -59,6 +60,7 @@ const CHART_TYPES = {
     GAUGE_SOLID_CHART: 'gauge-solid-chart',
     GAUGE_CHART: 'gauge-chart',
     GAUGE_CHART_ENHANCED: 'gauge-chart-enhanced',
+    GAUGE_CHART_CATEGORIES_SUMMARY: 'gauge-chart-categories-summary',
     KPI_WIDGET: 'kpi-widget',
     TEXT_WIDGET: 'text-widget',
     WATERFALL_BREAKDOWN: 'waterfall-chart-breakdown',
@@ -2274,6 +2276,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return new DrGaugeChart(pivotData, opts).render();
     };
 
+    highchartsRenderer.ptRenderGaugeCategoriesSummary = (pivotData, opts) => {
+        return new DrGaugeCategoriesSummaryChart(pivotData, opts).render();
+    };
+
     highchartsRenderer.ptRenderKpi = function (pivotData, opts) {
         var chartOptions = {};
 
@@ -4294,7 +4300,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;
@@ -7692,6 +7698,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             legendName: 'Data Series',
             startedMessage: 'To get started, drag one field to the value section. Best practice: Drag one field to the filter section, and filter as required.',
         },
+        [highchartsRenderer.CHART_TYPES.GAUGE_CHART_CATEGORIES_SUMMARY]: {
+            name: 'Gauge chart categories summary',
+            label: 'Gauge',
+            title: 'Gauge chart showing summary sections for different categories.',
+            axisName: 'X-Axis',
+            legendName: 'Data Series',
+            startedMessage: '',
+        },
         'kpi-widget': {
             name: 'Kpi ',
             label: 'KPI',
@@ -8085,6 +8099,24 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     },
                 ]
             },
+        {
+            type: 'gauge-categories-summary',
+            name: 'Gauge Categories Summary',
+            class: 'google-visualization-charteditor-mini-gauge',
+            subtypes: [
+                {
+                    type: highchartsRenderer.CHART_TYPES.GAUGE_CHART_CATEGORIES_SUMMARY,
+                    name: highchartsRenderer.chartsTypesInfo[highchartsRenderer.CHART_TYPES.GAUGE_CHART_CATEGORIES_SUMMARY].name,
+                    class: 'google-visualization-charteditor-thumbs-gauge-solid',
+                    render: highchartsRenderer.ptRenderGaugeCategoriesSummary,
+                    suboptions: [
+                        highchartsRenderer.suboptions["label_gauge"],
+                        highchartsRenderer.suboptions["tooltips_gauge"],
+                        highchartsRenderer.suboptions["subtitle"]
+                    ]
+                },
+            ]
+        },
             {
                 type: 'kpi',
                 name: 'KPI',

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_gauge_chart.test.js

@@ -306,7 +306,7 @@ describe("DrGaugeChart", () => {
     describe("createTicks", () => {
         it("should create a ticks array", () => {
             expect(
-                chart.createTicks(
+                DrGaugeChart.createTicks(
                     [
                         {
                             to: 100,
@@ -329,7 +329,7 @@ describe("DrGaugeChart", () => {
 
         it("should sort and remove duplicates", () => {
             expect(
-                chart.createTicks(
+                DrGaugeChart.createTicks(
                     [
                         {
                             to: 100,
@@ -707,12 +707,12 @@ describe("DrGaugeChart", () => {
     describe("getValue", () => {
         it("should return aggregator value unledss the total is empty", () => {
             DrGaugeChart.highchartsRenderer.ptCreateBasicLineSeries.mockReturnValue([]);
-            expect(chart.getValue(mockPivotData, {})).toBe(mockAggregationValue);
+            expect(DrGaugeChart.getValue(mockPivotData, {})).toBe(mockAggregationValue);
         });
 
         it("should return value to display", () => {
             DrGaugeChart.highchartsRenderer.ptCreateBasicLineSeries.mockReturnValue([{ data: [2000] }]);
-            expect(chart.getValue(mockPivotData, {})).toBe(2000);
+            expect(DrGaugeChart.getValue(mockPivotData, {})).toBe(2000);
         });
 
         it("should calculate total", () => {
@@ -721,7 +721,7 @@ describe("DrGaugeChart", () => {
                 { data: [3000] },
                 { data: [5000] },
             ]);
-            expect(chart.getValue(mockPivotData, {})).toBe(10000);
+            expect(DrGaugeChart.getValue(mockPivotData, {})).toBe(10000);
         });
     });
 
@@ -745,14 +745,14 @@ describe("DrGaugeChart", () => {
         };
 
         it("return a start border position", () => {
-            expect(chart.getBorderPosition(mockChart, mockOptions, "start")).toEqual({
+            expect(DrGaugeChart.getBorderPosition(mockChart, mockOptions, "start")).toEqual({
                 x: 170,
                 y: 201,
             });
         });
 
         it("return an end border position", () => {
-            expect(chart.getBorderPosition(mockChart, mockOptions, "end")).toEqual({
+            expect(DrGaugeChart.getBorderPosition(mockChart, mockOptions, "end")).toEqual({
                 x: 230,
                 y: 201,
             });
@@ -761,7 +761,7 @@ describe("DrGaugeChart", () => {
 
     describe("createBorder", () => {
         beforeEach(() => {
-            chart.getBorderPosition = jest.fn().mockReturnValue({
+            DrGaugeChart.getBorderPosition = jest.fn().mockReturnValue({
                 x: 100,
                 y: 200,
             });
@@ -805,7 +805,7 @@ describe("DrGaugeChart", () => {
         };
 
         it("should create a start border", () => {
-            chart.createBorder(
+            DrGaugeChart.createBorder(
                 mockChart,
                 {
                     gauge: {
@@ -834,7 +834,7 @@ describe("DrGaugeChart", () => {
         });
 
         it("should create an end border", () => {
-            chart.createBorder(
+            DrGaugeChart.createBorder(
                 mockChart,
                 {
                     gauge: {
@@ -990,7 +990,7 @@ describe("DrGaugeChart", () => {
     describe("getValueLabelPosition", () => {
         it("should return a value label position depends on the pane center and offsets", () => {
             expect(
-                chart.getValueLabelPosition(
+                DrGaugeChart.getValueLabelPosition(
                     {
                         pane: [
                             {
@@ -1012,7 +1012,7 @@ describe("DrGaugeChart", () => {
             });
 
             expect(
-                chart.getValueLabelPosition(
+                DrGaugeChart.getValueLabelPosition(
                     {
                         pane: [
                             {
@@ -1044,7 +1044,7 @@ describe("DrGaugeChart", () => {
 
         beforeEach(() => {
             chart.formatValueLabel = jest.fn().mockReturnValue("<div>Mock label</div>");
-            chart.getValueLabelPosition = jest.fn().mockReturnValue({
+            DrGaugeChart.getValueLabelPosition = jest.fn().mockReturnValue({
                 x: 100,
                 y: 200,
             });
@@ -1540,7 +1540,7 @@ describe("DrGaugeChart", () => {
 
             // Spy on class methods
             jest.spyOn(chart, "createValueLabel").mockReturnValue(mockValueLabel);
-            jest.spyOn(chart, "createBorder").mockImplementation((chart, options, position) => {
+            jest.spyOn(DrGaugeChart, "createBorder").mockImplementation((chart, options, position) => {
                 if (position === "start") return mockStartBorder;
                 if (position === "end") return mockEndBorder;
             });
@@ -1561,14 +1561,14 @@ describe("DrGaugeChart", () => {
         it("assigns the start border to chart.startBorder", () => {
             chart.setCustomElements(mockChart, mockOptions);
 
-            expect(chart.createBorder).toHaveBeenCalledWith(mockChart, mockOptions, "start");
+            expect(DrGaugeChart.createBorder).toHaveBeenCalledWith(mockChart, mockOptions, "start");
             expect(mockChart.startBorder).toBe(mockStartBorder);
         });
 
         it("assigns the end border to chart.endBorder", () => {
             chart.setCustomElements(mockChart, mockOptions);
 
-            expect(chart.createBorder).toHaveBeenCalledWith(mockChart, mockOptions, "end");
+            expect(DrGaugeChart.createBorder).toHaveBeenCalledWith(mockChart, mockOptions, "end");
             expect(mockChart.endBorder).toBe(mockEndBorder);
         });
 
@@ -1609,12 +1609,12 @@ describe("DrGaugeChart", () => {
             mockValueLabelPosition = { x: 70, y: 80 };
 
             // Spy on helper methods
-            jest.spyOn(chart, "getBorderPosition").mockImplementation((chart, options, position) => {
+            jest.spyOn(DrGaugeChart, "getBorderPosition").mockImplementation((chart, options, position) => {
                 if (position === "start") return mockStartPosition;
                 if (position === "end") return mockEndPosition;
             });
             jest.spyOn(chart, "getGoalIconPosition").mockReturnValue(mockGoalIconPosition);
-            jest.spyOn(chart, "getValueLabelPosition").mockReturnValue(mockValueLabelPosition);
+            jest.spyOn(DrGaugeChart, "getValueLabelPosition").mockReturnValue(mockValueLabelPosition);
         });
 
         afterEach(() => {
@@ -1624,14 +1624,14 @@ describe("DrGaugeChart", () => {
         it("updates startBorder attributes correctly", () => {
             chart.updateCustomElements(mockChart, mockOptions);
 
-            expect(chart.getBorderPosition).toHaveBeenCalledWith(mockChart, mockOptions, "start");
+            expect(DrGaugeChart.getBorderPosition).toHaveBeenCalledWith(mockChart, mockOptions, "start");
             expect(mockChart.startBorder.attr).toHaveBeenCalledWith(mockStartPosition);
         });
 
         it("updates endBorder attributes correctly", () => {
             chart.updateCustomElements(mockChart, mockOptions);
 
-            expect(chart.getBorderPosition).toHaveBeenCalledWith(mockChart, mockOptions, "end");
+            expect(DrGaugeChart.getBorderPosition).toHaveBeenCalledWith(mockChart, mockOptions, "end");
             expect(mockChart.endBorder.attr).toHaveBeenCalledWith(mockEndPosition);
         });
 
@@ -1645,7 +1645,7 @@ describe("DrGaugeChart", () => {
         it("updates label attributes correctly", () => {
             chart.updateCustomElements(mockChart, mockOptions);
 
-            expect(chart.getValueLabelPosition).toHaveBeenCalledWith(mockChart, mockOptions);
+            expect(DrGaugeChart.getValueLabelPosition).toHaveBeenCalledWith(mockChart, mockOptions);
             expect(mockChart.label.attr).toHaveBeenCalledWith(mockValueLabelPosition);
         });
     });

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