@datarailsshared/dr_renderer 1.3.30 → 1.3.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datarailsshared/dr_renderer",
-  "version": "1.3.30",
+  "version": "1.3.32",
   "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(
@@ -142,21 +115,17 @@ function DrGaugeChart(pivotData, opts) {
     };
 
     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;">
+        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.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
+            <span style="font-weight: 500; font-size: 0.875em; line-height: 1; color: ${options.gauge.colors.meta
             };">Current status</span>
         </span>`;
     };
@@ -176,8 +145,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 +163,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 +185,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 +214,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 +261,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) {
@@ -430,8 +330,7 @@ function DrGaugeChart(pivotData, opts) {
             // goal tooltip if lebels are hidden
             if (tick.pos === options.goal.value && !options.label.show) {
                 drTooltip.add(
-                    `${
-                        options.label.show_goal_name ? options.goal.title || "" : ""
+                    `${options.label.show_goal_name ? options.goal.title || "" : ""
                     }<span style="font-weight: 600">${this.formatValue(options.goal.value)}</span>`,
                     chart.goalIcon.element,
                     {
@@ -461,16 +360,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) {
@@ -522,6 +446,7 @@ function DrGaugeChart(pivotData, opts) {
                 },
                 margin: [0, 0, 0, 0],
                 spacing: [0, 0, 0, 0],
+                animation: !DrGaugeChart.highchartsRenderer.chartAnimationsDisabled(),
             },
 
             pane: {
@@ -581,6 +506,7 @@ function DrGaugeChart(pivotData, opts) {
                         backgroundColor: this.options.gauge.pivot.color,
                         radius: this.options.gauge.pivot.radius,
                     },
+                    animation: !DrGaugeChart.highchartsRenderer.chartAnimationsDisabled(),
                 },
             ],
         };
@@ -593,9 +519,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/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 = {};
 
@@ -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',
@@ -9900,6 +9932,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         disableAnimation = disabled;
     };
 
+    highchartsRenderer.chartAnimationsDisabled = function () {
+        return disableAnimation;
+    };
+
     highchartsRenderer.adjustFormatToSupportedByMoment = function(format) {
         return typeof format === 'string'
             ? format.replace(/y/g, 'Y').replace(/d/g, 'D').replace(/h/g, 'H')

package/tests/dr_gauge_chart.test.js

@@ -5,6 +5,7 @@ const { DrChartTooltip } = require("../src/dr_chart_tooltip");
 jest.mock("../src/dr_chart_tooltip"); // Mock the tooltip class
 
 const mockFormattedValue = "16,549";
+let disableChartAnimation = false;
 
 DrGaugeChart.highchartsRenderer = {
     CHART_TYPES: {
@@ -20,6 +21,8 @@ DrGaugeChart.highchartsRenderer = {
     formatValue: jest.fn().mockReturnValue({
         value: mockFormattedValue,
     }),
+    disableChartAnimations: jest.fn((value) => disableChartAnimation = value),
+    chartAnimationsDisabled: jest.fn(() => disableChartAnimation),
 };
 
 const mockAggregationValue = 1000;
@@ -111,6 +114,11 @@ describe("DrGaugeChart", () => {
             chart.render();
             expect(chart.configChart).toHaveBeenCalled();
         });
+
+        it("disables chart animations by demand", () => {
+            chart.render();
+            expect(DrGaugeChart.highchartsRenderer.chartAnimationsDisabled).toHaveBeenCalledTimes(2);
+        });
     });
 
     describe("isLeftQuarter", () => {
@@ -306,7 +314,7 @@ describe("DrGaugeChart", () => {
     describe("createTicks", () => {
         it("should create a ticks array", () => {
             expect(
-                chart.createTicks(
+                DrGaugeChart.createTicks(
                     [
                         {
                             to: 100,
@@ -329,7 +337,7 @@ describe("DrGaugeChart", () => {
 
         it("should sort and remove duplicates", () => {
             expect(
-                chart.createTicks(
+                DrGaugeChart.createTicks(
                     [
                         {
                             to: 100,
@@ -707,12 +715,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 +729,7 @@ describe("DrGaugeChart", () => {
                 { data: [3000] },
                 { data: [5000] },
             ]);
-            expect(chart.getValue(mockPivotData, {})).toBe(10000);
+            expect(DrGaugeChart.getValue(mockPivotData, {})).toBe(10000);
         });
     });
 
@@ -745,14 +753,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 +769,7 @@ describe("DrGaugeChart", () => {
 
     describe("createBorder", () => {
         beforeEach(() => {
-            chart.getBorderPosition = jest.fn().mockReturnValue({
+            DrGaugeChart.getBorderPosition = jest.fn().mockReturnValue({
                 x: 100,
                 y: 200,
             });
@@ -805,7 +813,7 @@ describe("DrGaugeChart", () => {
         };
 
         it("should create a start border", () => {
-            chart.createBorder(
+            DrGaugeChart.createBorder(
                 mockChart,
                 {
                     gauge: {
@@ -834,7 +842,7 @@ describe("DrGaugeChart", () => {
         });
 
         it("should create an end border", () => {
-            chart.createBorder(
+            DrGaugeChart.createBorder(
                 mockChart,
                 {
                     gauge: {
@@ -990,7 +998,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 +1020,7 @@ describe("DrGaugeChart", () => {
             });
 
             expect(
-                chart.getValueLabelPosition(
+                DrGaugeChart.getValueLabelPosition(
                     {
                         pane: [
                             {
@@ -1044,7 +1052,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 +1548,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 +1569,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 +1617,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 +1632,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 +1653,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);
         });
     });