@datarailsshared/dr_renderer 1.2.453 → 1.2.455

package/tests/dr_gauge_chart.test.js

@@ -0,0 +1,1931 @@
+const { DrGaugeChart, GAUGE_OPTIONS_DEFAULT } = require("../src/charts/dr_gauge_chart");
+const helpers = require("../src/dr-renderer-helpers");
+const { DrChartTooltip } = require("../src/dr_chart_tooltip");
+
+jest.mock("../src/dr_chart_tooltip"); // Mock the tooltip class
+
+const mockFormattedValue = "16,549";
+
+DrGaugeChart.highchartsRenderer = {
+    CHART_TYPES: {
+        GAUGE_CHART_ENHANCE: "gauge-chart-enhanced",
+    },
+    getDefaultValueForChart: jest.fn(),
+    ptCreateElementAndDraw: jest.fn(),
+    ptCreateBasicLineSeries: jest.fn().mockReturnValue([{ data: [1] }, { data: [2] }]),
+    getSingleValueAgg: jest.fn().mockReturnValue({
+        aggfunc: (a, b) => a + b,
+        base: 0,
+    }),
+    formatValue: jest.fn().mockReturnValue({
+        value: mockFormattedValue,
+    }),
+};
+
+const mockAggregationValue = 1000;
+
+const mockAggregation = {
+    widget_values_format: "###",
+    value: jest.fn().mockReturnValue(mockAggregationValue),
+};
+
+const mockPivotData = {
+    getAggregator: jest.fn().mockImplementation().mockReturnValue(mockAggregation),
+};
+
+const mockChartOptionsPercentage = {
+    segments: [
+        {
+            from: 0,
+            to: 60,
+            title: "Low",
+            color: "#BF1D30",
+        },
+        {
+            from: 61,
+            to: 80,
+            title: "Medium",
+            color: "#FFA310",
+        },
+        {
+            from: 81,
+            to: 100,
+            title: "High",
+            color: "#037C5A",
+        },
+    ],
+    goal: {
+        name: "Goal",
+        value: 180,
+    },
+    isAbsoluteValue: false,
+    label: {},
+    gauge: {
+        background: "white",
+    },
+};
+
+const mockChartOptionsAbsolute = {
+    segments: [
+        {
+            from: 0,
+            to: 100,
+            title: "Low",
+            color: "#BF1D30",
+        },
+        {
+            from: 101,
+            to: 200,
+            title: "Medium",
+            color: "#FFA310",
+        },
+        {
+            from: 201,
+            to: 500,
+            title: "High",
+            color: "#037C5A",
+        },
+    ],
+    goal: {
+        name: "Goal",
+        value: 180,
+    },
+    isAbsoluteValue: true,
+};
+
+let chart;
+
+describe("DrGaugeChart", () => {
+    beforeEach(() => {
+        chart = new DrGaugeChart(mockPivotData, {
+            chartOptions: mockChartOptionsPercentage,
+        });
+    });
+
+    describe("render", () => {
+        it("calls configChart", () => {
+            chart.configChart = jest.fn().mockReturnValue({
+                options: "Option",
+            });
+
+            chart.render();
+            expect(chart.configChart).toHaveBeenCalled();
+        });
+    });
+
+    describe("isLeftQuarter", () => {
+        it("should check in which quarter the chart value is", () => {
+            expect(chart.isLeftQuarter(20, 100)).toBe(true);
+            expect(chart.isLeftQuarter(20, 30)).toBe(false);
+            expect(chart.isLeftQuarter(20, 20)).toBe(false);
+            expect(chart.isLeftQuarter(100, 200)).toBe(false);
+            expect(chart.isLeftQuarter(99, 200)).toBe(true);
+        });
+
+        it("should use default #max parameter", () => {
+            // Max = 180
+            expect(chart.isLeftQuarter(20)).toBe(true);
+            expect(chart.isLeftQuarter(120)).toBe(false);
+        });
+    });
+
+    describe("createPlotBands", () => {
+        it("should create plots for absolute values", () => {
+            expect(
+                chart.createPlotBands({
+                    isAbsoluteValue: true,
+                    gauge: {
+                        thickness: 10,
+                    },
+                    goal: {
+                        value: 180,
+                    },
+                    segments: [
+                        {
+                            from: 0,
+                            to: 200,
+                            color: "red",
+                            title: "Title 1",
+                        },
+                        {
+                            from: 201,
+                            to: 400,
+                            color: "blue",
+                            title: "Title 2",
+                        },
+                        {
+                            from: 401,
+                            to: 800,
+                            color: "blue",
+                            title: "Title 3",
+                        },
+                    ],
+                })
+            ).toEqual([
+                {
+                    from: 0,
+                    to: 200,
+                    color: "red",
+                    thickness: 10,
+                    title: "Title 1",
+                },
+                {
+                    from: 200,
+                    to: 400,
+                    color: "blue",
+                    thickness: 10,
+                    title: "Title 2",
+                },
+                {
+                    from: 400,
+                    to: 800,
+                    color: "blue",
+                    thickness: 10,
+                    title: "Title 3",
+                },
+            ]);
+        });
+
+        it("should clamp values (min is always 0, max of goal and last segment)", () => {
+            expect(
+                chart.createPlotBands({
+                    isAbsoluteValue: true,
+                    gauge: {
+                        thickness: 10,
+                    },
+                    goal: {
+                        value: 1800,
+                    },
+                    segments: [
+                        {
+                            from: 100,
+                            to: 200,
+                            color: "red",
+                            title: "Title 1",
+                        },
+                        {
+                            from: 201,
+                            to: 400,
+                            color: "blue",
+                            title: "Title 2",
+                        },
+                        {
+                            from: 401,
+                            to: 800,
+                            color: "blue",
+                            title: "Title 3",
+                        },
+                    ],
+                })
+            ).toEqual([
+                {
+                    from: 0,
+                    to: 200,
+                    color: "red",
+                    thickness: 10,
+                    title: "Title 1",
+                },
+                {
+                    from: 200,
+                    to: 400,
+                    color: "blue",
+                    thickness: 10,
+                    title: "Title 2",
+                },
+                {
+                    from: 400,
+                    to: 1800,
+                    color: "blue",
+                    thickness: 10,
+                    title: "Title 3",
+                },
+            ]);
+        });
+
+        it("should create plots for percentage values", () => {
+            expect(
+                chart.createPlotBands({
+                    isAbsoluteValue: false,
+                    gauge: {
+                        thickness: 10,
+                    },
+                    goal: {
+                        value: 1000,
+                    },
+                    segments: [
+                        {
+                            from: 0,
+                            to: 50,
+                            color: "red",
+                            title: "Title 1",
+                        },
+                        {
+                            from: 51,
+                            to: 100,
+                            color: "blue",
+                            title: "Title 2",
+                        },
+                        {
+                            from: 101,
+                            to: 175,
+                            color: "blue",
+                            title: "Title 3",
+                        },
+                    ],
+                })
+            ).toEqual([
+                {
+                    from: 0,
+                    to: 500,
+                    color: "red",
+                    thickness: 10,
+                    title: "Title 1",
+                },
+                {
+                    from: 500,
+                    to: 1000,
+                    color: "blue",
+                    thickness: 10,
+                    title: "Title 2",
+                },
+                {
+                    from: 1000,
+                    to: 1750,
+                    color: "blue",
+                    thickness: 10,
+                    title: "Title 3",
+                },
+            ]);
+        });
+    });
+
+    describe("createTicks", () => {
+        it("should create a ticks array", () => {
+            expect(
+                chart.createTicks(
+                    [
+                        {
+                            to: 100,
+                        },
+                        {
+                            to: 150,
+                        },
+                        {
+                            to: 200,
+                        },
+                    ],
+                    {
+                        goal: {
+                            value: 180,
+                        },
+                    }
+                )
+            ).toEqual([0, 100, 150, 180, 200]);
+        });
+
+        it("should sort and remove duplicates", () => {
+            expect(
+                chart.createTicks(
+                    [
+                        {
+                            to: 100,
+                        },
+                        {
+                            to: 100,
+                        },
+                        {
+                            to: 50,
+                        },
+                        {
+                            to: 180,
+                        },
+                    ],
+                    {
+                        goal: {
+                            value: 180,
+                        },
+                    }
+                )
+            ).toEqual([0, 50, 100, 180]);
+        });
+    });
+
+    describe("mergeOptions", () => {
+        it("should merge provided options with default one", () => {
+            chart.getDefaultValueForChart = jest.fn().mockReturnValue({
+                option1: 1,
+                option2: 2,
+            });
+            const mockRes = {
+                option1: 1,
+                option2: 2,
+            };
+            spyOn(helpers, "mergeDeep").and.returnValue(mockRes);
+            expect(
+                chart.mergeOptions({
+                    options3: 3,
+                    options4: 4,
+                })
+            ).toEqual(mockRes);
+            expect(helpers.mergeDeep).toHaveBeenCalledWith(
+                GAUGE_OPTIONS_DEFAULT,
+                {
+                    option1: 1,
+                    option2: 2,
+                },
+                {
+                    options3: 3,
+                    options4: 4,
+                }
+            );
+            helpers.mergeDeep.re;
+        });
+    });
+
+    describe("getAngleForValue", () => {
+        it("should return an angle in radians", () => {
+            expect(chart.getAngleForValue(100, 0, 200, -90, 90)).toBe(Math.PI / 2);
+            expect(chart.getAngleForValue(50, 0, 200, -90, 90)).toBe(Math.PI / 4);
+            expect(chart.getAngleForValue(200, 0, 200, -90, 90)).toBe(Math.PI);
+        });
+
+        it("should use default value", () => {
+            // min = 0;
+            // max = 180 goal
+            // angle -90/ 90
+            expect(chart.getAngleForValue(90)).toBe(Math.PI / 2);
+        });
+    });
+
+    describe("formatValue", () => {
+        it("should format number to provided format", () => {
+            expect(chart.formatValue(16549.1234, "#,###")).toBe(mockFormattedValue);
+            expect(DrGaugeChart.highchartsRenderer.formatValue).toHaveBeenCalledWith("n", "#,###", 16549.1234);
+        });
+
+        it("should not format value unless it is a number", () => {
+            expect(chart.formatValue("one", "#,###")).toBe("one");
+            expect(DrGaugeChart.highchartsRenderer.formatValue).not.toHaveBeenCalled();
+        });
+
+        it("should use default value for format", () => {
+            expect(chart.formatValue(16549.1234)).toBe(mockFormattedValue);
+            expect(DrGaugeChart.highchartsRenderer.formatValue).toHaveBeenCalledWith(
+                "n",
+                mockAggregation.widget_values_format,
+                16549.1234
+            );
+        });
+    });
+
+    describe("toPercent", () => {
+        it("should format absolute values", () => {
+            chart = new DrGaugeChart(mockPivotData, {
+                chartOptions: { ...mockChartOptionsAbsolute },
+            });
+            expect(chart.toPercent(100)).toBe("20%");
+            expect(chart.toPercent(250)).toBe("50%");
+            expect(chart.toPercent(500)).toBe("100%");
+            // rounding
+            expect(chart.toPercent(2)).toBe("0%");
+            expect(chart.toPercent(3)).toBe("1%");
+        });
+
+        it("should format percentage values", () => {
+            chart = new DrGaugeChart(mockPivotData, {
+                chartOptions: { ...mockChartOptionsPercentage },
+            });
+            expect(chart.toPercent(180)).toBe("100%");
+            expect(chart.toPercent(90)).toBe("50%");
+            expect(chart.toPercent(18)).toBe("10%");
+            // rounding
+            expect(chart.toPercent(0.5)).toBe("0%");
+            expect(chart.toPercent(2)).toBe("1%");
+        });
+    });
+
+    describe("formatValueLabel", () => {
+        it("should return the label html", () => {
+            const label = chart.formatValueLabel(100, {
+                label: {
+                    font_size: 16,
+                    font_color: "#000",
+                    show_percentage_in_value: false,
+                },
+                gauge: {
+                    colors: {
+                        meta: "#808080",
+                    },
+                },
+            });
+            expect(simplifyString(label)).toBe(
+                simplifyString(
+                    `<span style="display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 16px;">
+                        <span style="font-weight: 600; font-size: 1.5em; line-height: 1; color: #000">
+                            ${mockFormattedValue}
+                        </span>
+                        <span style="font-weight: 500; font-size: 0.875em; line-height: 1; color: #808080;">Current status</span>
+                    </span>`
+                )
+            );
+        });
+
+        it("should add percentage", () => {
+            const label = chart.formatValueLabel(100, {
+                label: {
+                    font_size: 24,
+                    font_color: "#000",
+                    show_percentage_in_value: true,
+                },
+                gauge: {
+                    colors: {
+                        meta: "#929292",
+                    },
+                },
+            });
+            expect(simplifyString(label)).toBe(
+                simplifyString(
+                    `<span style="display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 24px;">
+                        <span style="font-weight: 600; font-size: 1.5em; line-height: 1; color: #000">
+                            ${mockFormattedValue}
+                            <span style="font-size: 0.5833em; font-weight: 600; color: #929292;">(56%)</span>
+                        </span>
+                        <span style="font-weight: 500; font-size: 0.875em; line-height: 1; color: #929292;">Current status</span>
+                    </span>`
+                )
+            );
+        });
+    });
+
+    describe("formatTickLabel", () => {
+        it("should return the tick label html", () => {
+            const label = chart.formatTickLabel(100, {
+                label: {
+                    font_size: 16,
+                    font_color: "#000",
+                    show_percentage_in_segments: false,
+                },
+                goal: {
+                    value: 180,
+                    name: "Goal",
+                },
+                gauge: {
+                    colors: {
+                        meta: "#808080",
+                    },
+                },
+            });
+
+            expect(simplifyString(label)).toBe(
+                simplifyString(`<span style="
+                        display: flex;
+                        align-items: center;
+                        gap: 4px;
+                        font-weight: 600;
+                        font-size: 16px;
+                    ">
+                        <span style="color: #000;">${mockFormattedValue}</span>
+                    </span>`)
+            );
+        });
+
+        it("should add repcentage", () => {
+            const label = chart.formatTickLabel(100, {
+                label: {
+                    font_size: 16,
+                    font_color: "#000",
+                    show_percentage_in_segments: true,
+                },
+                goal: {
+                    value: 180,
+                    name: "Goal",
+                },
+                gauge: {
+                    colors: {
+                        meta: "#808080",
+                    },
+                },
+            });
+
+            expect(simplifyString(label)).toBe(
+                simplifyString(`<span style="
+                        display: flex;
+                        align-items: center;
+                        gap: 4px;
+                        font-weight: 600;
+                        font-size: 16px;
+                    ">
+                        <span style="color: #000;">${mockFormattedValue}</span>
+                        <span style="font-size: 0.75em; color: #808080; font-weight: 400;">(56%)</span>
+                    </span>`)
+            );
+        });
+
+        it("should apply extra styles for goal", () => {
+            const label = chart.formatTickLabel(180, {
+                label: {
+                    font_size: 16,
+                    font_color: "#000",
+                    show_percentage_in_segments: true,
+                },
+                goal: {
+                    value: 180,
+                    name: "Goal",
+                },
+                gauge: {
+                    colors: {
+                        meta: "#808080",
+                        goal: "#ff0",
+                    },
+                },
+            });
+
+            expect(simplifyString(label)).toBe(
+                simplifyString(`<span style="
+                        display: flex;
+                        align-items: center;
+                        gap: 4px;
+                        font-weight: 600;
+                        font-size: 16px;
+                        padding-left: 12px;
+                    ">
+                        <span style="font-size: 1.125em; color: #ff0;">${mockFormattedValue}</span>
+                        <span style="font-size: 0.75em; color: #808080; font-weight: 400;">(100%)</span>
+                    </span>`)
+            );
+        });
+
+        it("should add goal title", () => {
+            const label = chart.formatTickLabel(180, {
+                label: {
+                    font_size: 16,
+                    font_color: "#000",
+                    show_percentage_in_segments: true,
+                    show_goal_name: true,
+                },
+                goal: {
+                    value: 180,
+                    title: "Goal",
+                },
+                gauge: {
+                    colors: {
+                        meta: "#808080",
+                        goal: "#ff0",
+                    },
+                },
+            });
+
+            expect(simplifyString(label)).toBe(
+                simplifyString(`<span style="
+                        display: flex;
+                        align-items: center;
+                        gap: 4px;
+                        font-weight: 600;
+                        font-size: 16px;
+                        padding-left: 12px;
+                    ">
+                        <span style="font-size: 1.125em; color: #ff0;">${mockFormattedValue}</span>
+                        <span style="font-size: 0.75em; color: #ff0;">Goal</span>
+                        <span style="font-size: 0.75em; color: #808080; font-weight: 400;">(100%)</span>
+                    </span>`)
+            );
+        });
+
+        it("should add paddings", () => {
+            spyOn(chart, "isLeftQuarter").and.returnValues(true, false);
+
+            const labelLeft = chart.formatTickLabel(180, {
+                label: {
+                    font_size: 16,
+                    font_color: "#000",
+                    show_percentage_in_segments: false,
+                    show_goal_name: false,
+                },
+                goal: {
+                    value: 180,
+                    title: "Goal",
+                },
+                gauge: {
+                    colors: {
+                        meta: "#808080",
+                        goal: "#ff0",
+                    },
+                },
+            });
+
+            expect(simplifyString(labelLeft)).toBe(
+                simplifyString(`<span style="
+                        display: flex;
+                        align-items: center;
+                        gap: 4px;
+                        font-weight: 600;
+                        font-size: 16px;
+                        padding-right: 12px;
+                    ">
+                        <span style="font-size: 1.125em; color: #ff0;">${mockFormattedValue}</span>
+                    </span>`)
+            );
+
+            const labelRight = chart.formatTickLabel(180, {
+                label: {
+                    font_size: 16,
+                    font_color: "#000",
+                    show_percentage_in_segments: false,
+                    show_goal_name: false,
+                },
+                goal: {
+                    value: 180,
+                    title: "Goal",
+                },
+                gauge: {
+                    colors: {
+                        meta: "#808080",
+                        goal: "#ff0",
+                    },
+                },
+            });
+
+            expect(simplifyString(labelRight)).toBe(
+                simplifyString(`<span style="
+                        display: flex;
+                        align-items: center;
+                        gap: 4px;
+                        font-weight: 600;
+                        font-size: 16px;
+                        padding-left: 12px;
+                    ">
+                        <span style="font-size: 1.125em; color: #ff0;">${mockFormattedValue}</span>
+                    </span>`)
+            );
+        });
+    });
+
+    describe("getValue", () => {
+        it("should return aggregator value unledss the total is empty", () => {
+            DrGaugeChart.highchartsRenderer.ptCreateBasicLineSeries.mockReturnValue([]);
+            expect(chart.getValue(mockPivotData, {})).toBe(mockAggregationValue);
+        });
+
+        it("should return value to display", () => {
+            DrGaugeChart.highchartsRenderer.ptCreateBasicLineSeries.mockReturnValue([{ data: [2000] }]);
+            expect(chart.getValue(mockPivotData, {})).toBe(2000);
+        });
+
+        it("should calculate total", () => {
+            DrGaugeChart.highchartsRenderer.ptCreateBasicLineSeries.mockReturnValue([
+                { data: [2000] },
+                { data: [3000] },
+                { data: [5000] },
+            ]);
+            expect(chart.getValue(mockPivotData, {})).toBe(10000);
+        });
+    });
+
+    describe("getBorderPosition", () => {
+        const mockChart = {
+            pane: [
+                {
+                    options: {
+                        center: [200, 200],
+                        size: 100,
+                    },
+                },
+            ],
+        };
+
+        const mockOptions = {
+            gauge: {
+                tickLength: 40,
+                tickWidth: 2,
+            },
+        };
+
+        it("return a start border position", () => {
+            expect(chart.getBorderPosition(mockChart, mockOptions, "start")).toEqual({
+                x: 170,
+                y: 201,
+            });
+        });
+
+        it("return an end border position", () => {
+            expect(chart.getBorderPosition(mockChart, mockOptions, "end")).toEqual({
+                x: 230,
+                y: 201,
+            });
+        });
+    });
+
+    describe("createBorder", () => {
+        beforeEach(() => {
+            chart.getBorderPosition = jest.fn().mockReturnValue({
+                x: 100,
+                y: 200,
+            });
+        });
+
+        const toFrontMock = jest.fn();
+
+        const addMock = jest.fn().mockReturnValue({
+            toFront: toFrontMock,
+        });
+
+        const attrMock = jest.fn().mockReturnValue({
+            add: addMock,
+        });
+
+        const arcMock = jest.fn().mockReturnValue({
+            attr: attrMock,
+        });
+
+        const mockChart = {
+            renderer: {
+                arc: arcMock,
+            },
+            yAxis: [
+                {
+                    options: {
+                        plotBands: [
+                            {
+                                color: "red",
+                            },
+                            {
+                                color: "blue",
+                            },
+                            {
+                                color: "green",
+                            },
+                        ],
+                    },
+                },
+            ],
+        };
+
+        it("should create a start border", () => {
+            chart.createBorder(
+                mockChart,
+                {
+                    gauge: {
+                        thickness: 10,
+                    },
+                },
+                "start"
+            );
+            // draw an arc
+            expect(arcMock).toHaveBeenCalledWith({
+                x: 100,
+                y: 200,
+                r: 5,
+                innerR: 0,
+                start: 0,
+                end: Math.PI,
+            });
+            // set color of first segment
+            expect(attrMock).toHaveBeenCalledWith({
+                fill: "red",
+            });
+            //add to pane
+            expect(addMock).toHaveBeenCalled();
+            // move to front
+            expect(toFrontMock).toHaveBeenCalled();
+        });
+
+        it("should create an end border", () => {
+            chart.createBorder(
+                mockChart,
+                {
+                    gauge: {
+                        thickness: 20,
+                    },
+                },
+                "end"
+            );
+            // draw an arc
+            expect(arcMock).toHaveBeenCalledWith({
+                x: 100,
+                y: 200,
+                r: 10,
+                innerR: 0,
+                start: 0,
+                end: Math.PI,
+            });
+            // set color of last segment
+            expect(attrMock).toHaveBeenCalledWith({
+                fill: "green",
+            });
+            //add to pane
+            expect(addMock).toHaveBeenCalled();
+            // move to front
+            expect(toFrontMock).toHaveBeenCalled();
+        });
+    });
+
+    describe("getGoalIconPosition", () => {
+        it("should return an icon position", () => {
+            chart.getAngleForValue = jest.fn().mockReturnValue(0);
+            expect(
+                chart.getGoalIconPosition(
+                    {
+                        pane: [
+                            {
+                                options: {
+                                    center: [100, 100],
+                                    size: 100,
+                                },
+                            },
+                        ],
+                    },
+                    {
+                        gauge: {
+                            goalIconSize: [16, 16],
+                        },
+                        goal: {
+                            value: 0,
+                        },
+                    }
+                )
+            ).toEqual({
+                x: 42,
+                y: 92,
+            });
+            expect(chart.getAngleForValue).toHaveBeenCalledWith(0);
+            chart.getAngleForValue = jest.fn().mockReturnValue(Math.PI / 2);
+            expect(
+                chart.getGoalIconPosition(
+                    {
+                        pane: [
+                            {
+                                options: {
+                                    center: [200, 200],
+                                    size: 200,
+                                },
+                            },
+                        ],
+                    },
+                    {
+                        gauge: {
+                            goalIconSize: [24, 24],
+                        },
+                        goal: {
+                            value: 200,
+                        },
+                    }
+                )
+            ).toEqual({
+                x: 188,
+                y: 88,
+            });
+            expect(chart.getAngleForValue).toHaveBeenCalledWith(200);
+            expect(
+                chart.getGoalIconPosition(
+                    {
+                        pane: [
+                            {
+                                options: {
+                                    center: [500, 500],
+                                    size: 500,
+                                },
+                            },
+                        ],
+                    },
+                    {
+                        gauge: {
+                            goalIconSize: [50, 50],
+                        },
+                        goal: {
+                            value: 500,
+                        },
+                    }
+                )
+            ).toEqual({
+                x: 475,
+                y: 225,
+            });
+            expect(chart.getAngleForValue).toHaveBeenCalledWith(500);
+        });
+    });
+
+    describe("createGoalIcon", () => {
+        const toFront = jest.fn();
+        const add = jest.fn().mockReturnValue({ toFront });
+        const image = jest.fn().mockReturnValue({ add });
+
+        beforeEach(() => {
+            chart.getGoalIconPosition = jest.fn().mockReturnValue({
+                x: 100,
+                y: 200,
+            });
+
+            chart.createGoalIcon(
+                {
+                    renderer: {
+                        image,
+                    },
+                },
+                {
+                    gauge: {
+                        goalIcon: "base64hash",
+                        goalIconSize: [16, 16],
+                    },
+                }
+            );
+        });
+
+        it("should create an goal icon", () => {
+            expect(image).toHaveBeenCalledWith("base64hash", 100, 200, 16, 16);
+        });
+
+        it("should add icon to the plot", () => {
+            expect(add).toHaveBeenCalled();
+        });
+
+        it("should move icon to front", () => {
+            expect(toFront).toHaveBeenCalled();
+        });
+    });
+
+    describe("getValueLabelPosition", () => {
+        it("should return a value label position depends on the pane center and offsets", () => {
+            expect(
+                chart.getValueLabelPosition(
+                    {
+                        pane: [
+                            {
+                                options: {
+                                    center: [500, 300],
+                                },
+                            },
+                        ],
+                    },
+                    {
+                        gauge: {
+                            valueOffset: [20, 30, 40, 30],
+                        },
+                    }
+                )
+            ).toEqual({
+                x: 500,
+                y: 320,
+            });
+
+            expect(
+                chart.getValueLabelPosition(
+                    {
+                        pane: [
+                            {
+                                options: {
+                                    center: [200, 100],
+                                },
+                            },
+                        ],
+                    },
+                    {
+                        gauge: {
+                            valueOffset: [40, 30, 40, 30],
+                        },
+                    }
+                )
+            ).toEqual({
+                x: 200,
+                y: 140,
+            });
+        });
+    });
+
+    describe("createValueLabel", () => {
+        const css = jest.fn().mockReturnValue({});
+        const attr = jest.fn().mockReturnValue({ css });
+        const toFront = jest.fn().mockReturnValue({ attr });
+        const add = jest.fn().mockReturnValue({ toFront });
+        const text = jest.fn().mockReturnValue({ add });
+
+        beforeEach(() => {
+            chart.formatValueLabel = jest.fn().mockReturnValue("<div>Mock label</div>");
+            chart.getValueLabelPosition = jest.fn().mockReturnValue({
+                x: 100,
+                y: 200,
+            });
+            chart.createValueLabel({
+                renderer: {
+                    text,
+                },
+            });
+        });
+
+        it("should create a value label", () => {
+            // create label
+            expect(text).toHaveBeenCalledWith("<div>Mock label</div>", 0, 0, true);
+            // set position
+            expect(attr).toHaveBeenCalledWith({
+                x: 100,
+                y: 200,
+            });
+            // centering
+            expect(css).toHaveBeenCalledWith({ transform: "translateX(-50%)" });
+        });
+    });
+
+    describe("getPaneDimensions", () => {
+        const mockChart = {
+            chartWidth: 500,
+            chartHeight: 500,
+            renderer: {
+                label: jest.fn().mockReturnValue({
+                    add: jest.fn().mockReturnValue({
+                        destroy: jest.fn(),
+                        bBox: {
+                            width: 50,
+                            height: 25,
+                        },
+                    }),
+                }),
+            },
+        };
+
+        const mockOptions = {
+            gauge: {
+                offset: [30, 30, 30, 30],
+                valueOffset: [20, 20, 20, 20],
+                goalIconSize: [16, 16],
+            },
+            label: {
+                show: true,
+            },
+            goal: {
+                value: 100,
+            },
+        };
+
+        beforeEach(() => {
+            chart.createValueLabel = jest.fn().mockReturnValue({
+                getBBox: jest.fn().mockReturnValue({
+                    height: 50,
+                }),
+                destroy: jest.fn(),
+            });
+        });
+
+        it("should calculate a pane dimensions (labels - reserve space - horizontal)", () => {
+            chart.getAngleForValue = jest.fn().mockReturnValue(0);
+            expect(chart.getPaneDimensions(mockChart, mockOptions)).toEqual({
+                center: [250, 380],
+                radius: 170,
+            });
+        });
+
+        it("should calculate a pane dimensions (labels - reserve space - )", () => {
+            chart.getAngleForValue = jest.fn().mockReturnValue(Math.PI / 4);
+
+            expect(chart.getPaneDimensions(mockChart, mockOptions)).toEqual({
+                center: [250, 380],
+                radius: 220,
+            });
+        });
+
+        it("should calculate a pane dimensions (labels - not reserve space - vertical)", () => {
+            chart.getAngleForValue = jest.fn().mockReturnValue(Math.PI / 2);
+
+            expect(chart.getPaneDimensions({ ...mockChart, ...{ chartWidth: 1000 } }, mockOptions)).toEqual({
+                center: [500, 380],
+                radius: 337.5,
+            });
+        });
+
+        it("should calculate a pane dimensions (goal - reserve space - horizontal)", () => {
+            chart.getAngleForValue = jest.fn().mockReturnValue(0);
+            expect(
+                chart.getPaneDimensions(mockChart, {
+                    ...mockOptions,
+                    ...{
+                        label: {
+                            show: false,
+                        },
+                    },
+                })
+            ).toEqual({
+                center: [250, 380],
+                radius: 212,
+            });
+        });
+
+        it("should calculate a pane dimensions (goal - not reserve space)", () => {
+            chart.getAngleForValue = jest.fn().mockReturnValue(Math.PI / 4);
+            expect(
+                chart.getPaneDimensions(mockChart, {
+                    ...mockOptions,
+                    ...{
+                        label: {
+                            show: false,
+                        },
+                    },
+                })
+            ).toEqual({
+                center: [250, 380],
+                radius: 220,
+            });
+        });
+
+        it("should calculate a pane dimensions (goal - reserve space - vertical)", () => {
+            chart.getAngleForValue = jest.fn().mockReturnValue(Math.PI / 2);
+            expect(
+                chart.getPaneDimensions(
+                    { ...mockChart, ...{ chartWidth: 1000 } },
+                    {
+                        ...mockOptions,
+                        ...{
+                            label: {
+                                show: false,
+                            },
+                        },
+                    }
+                )
+            ).toEqual({
+                center: [500, 380],
+                radius: 342,
+            });
+        });
+    });
+
+    describe("setTicksStyles", () => {
+        it("should align ticks on the left", () => {
+            const mockChart = {
+                yAxis: [
+                    {
+                        ticks: {
+                            0: {
+                                pos: 30,
+                                css: jest.fn(),
+                                label: {
+                                    css: jest.fn(),
+                                },
+                            },
+                            1: {
+                                pos: 120,
+                                label: {
+                                    css: jest.fn(),
+                                },
+                            },
+                        },
+                    },
+                ],
+            };
+
+            chart.setTicksStyles(mockChart, {
+                gauge: {
+                    colors: {
+                        goal: "blue",
+                    },
+                },
+                goal: {
+                    value: 180,
+                },
+            });
+            // move tick on the left
+            expect(mockChart.yAxis[0].ticks[0].label.css).toHaveBeenCalledWith({
+                transform: "translate(-100%, 0)",
+            });
+            // do not move tick on the right
+            expect(mockChart.yAxis[0].ticks[1].label.css).toHaveBeenCalledWith({
+                transform: "translate(0, 0)",
+            });
+        });
+
+        it("should align ticks on the left", () => {
+            const mockChart = {
+                yAxis: [
+                    {
+                        ticks: {
+                            0: {
+                                pos: 180,
+                                mark: {
+                                    attr: jest.fn(),
+                                },
+                            },
+                        },
+                    },
+                ],
+            };
+
+            chart.setTicksStyles(mockChart, {
+                gauge: {
+                    colors: {
+                        goal: "blue",
+                    },
+                },
+                goal: {
+                    value: 180,
+                },
+            });
+            // add a goal tick styles
+            expect(mockChart.yAxis[0].ticks[0].mark.attr).toHaveBeenCalledWith({
+                "pointer-events": "none",
+                stroke: "blue",
+                "stroke-dasharray": 2,
+            });
+        });
+    });
+
+    describe("addTooltips", () => {
+        let mockChart;
+        let mockOptions;
+        let mockInstance;
+
+        beforeEach(() => {
+            mockChart = {
+                yAxis: [
+                    {
+                        ticks: {
+                            0: { pos: 0, label: { element: "label0" } },
+                            50: { pos: 50, label: { element: "label50" } },
+                            100: { pos: 100, label: { element: "label100" } },
+                        },
+                        plotLinesAndBands: [
+                            {
+                                options: { title: "Segment 1" },
+                                svgElem: { element: "bandElement1" },
+                            },
+                            {
+                                options: { title: "Segment 2" },
+                                svgElem: { element: "bandElement2" },
+                            },
+                        ],
+                    },
+                ],
+                label: { element: "labelElement" },
+                goalIcon: { element: "goalIconElement" },
+            };
+
+            mockOptions = {
+                tooltips: {
+                    show: true,
+                    font_size: 16,
+                    font_color: "black",
+                    font_style: "Poppins",
+                },
+                label: {
+                    show: true,
+                },
+                goal: { value: 100, title: "Goal" },
+            };
+
+            // Mock DrChartTooltip instance
+            mockInstance = {
+                add: jest.fn(),
+            };
+            DrChartTooltip.mockImplementation(() => mockInstance);
+
+            // Reset mocks
+            jest.clearAllMocks();
+        });
+
+        afterEach(() => {
+            jest.restoreAllMocks();
+        });
+
+        it("should return false unless tooltips is on", () => {
+            mockOptions.tooltips.show = false;
+            expect(chart.addTooltips(mockChart, mockOptions)).toBe(false);
+        });
+
+        it("should initialize DrChartTooltip with correct options", () => {
+            chart.addTooltips(mockChart, mockOptions);
+
+            expect(DrChartTooltip).toHaveBeenCalledWith(mockChart, {
+                fontSize: 16,
+                fontFamily: "Poppins",
+                color: "black",
+            });
+        });
+
+        it("adds tooltips to plotLinesAndBands when show_segment_name is true", () => {
+            mockOptions.tooltips.show_segment_name = true;
+
+            chart.addTooltips(mockChart, mockOptions);
+
+            expect(mockInstance.add).toHaveBeenCalledWith("Segment 1", "bandElement1", { direction: "top", followPointer: true });
+            expect(mockInstance.add).toHaveBeenCalledWith("Segment 2", "bandElement2", { direction: "top", followPointer: true });
+        });
+
+        it("adds percentage tooltip to chart label when show_percentage_in_value is true", () => {
+            mockOptions.tooltips.show_percentage_in_value = true;
+            const toPercentSpy = jest.spyOn(chart, "toPercent").mockReturnValue("50%");
+
+            chart.addTooltips(mockChart, mockOptions);
+
+            expect(mockInstance.add).toHaveBeenCalledWith("50%", "labelElement", { direction: "top" });
+
+            toPercentSpy.mockRestore();
+        });
+
+        it("does not add percentage tooltip to chart label when it is shown in label", () => {
+            mockOptions.tooltips.show_percentage_in_value = true;
+            mockOptions.label.show_percentage_in_value = true;
+
+            chart.addTooltips(mockChart, mockOptions);
+
+            expect(mockInstance.add).not.toHaveBeenCalled();
+        });
+
+        it("adds goal tooltip when goal value matches tick position and labels are hidden", () => {
+            mockOptions.label.show_goal_name = true;
+            mockOptions.label.show = false;
+            jest.spyOn(chart, "formatValue").mockReturnValue("100%");
+
+            chart.addTooltips(mockChart, mockOptions);
+
+            expect(mockInstance.add).toHaveBeenCalledWith('Goal<span style="font-weight: 600">100%</span>', "goalIconElement", {
+                direction: "right",
+            });
+        });
+
+        it("adds goal tooltip when goal value matches tick position and labels are hidden (without goal title)", () => {
+            mockOptions.label.show_goal_name = false;
+            mockOptions.label.show = false;
+            jest.spyOn(chart, "formatValue").mockReturnValue("100%");
+
+            chart.addTooltips(mockChart, mockOptions);
+
+            expect(mockInstance.add).toHaveBeenCalledWith('<span style="font-weight: 600">100%</span>', "goalIconElement", {
+                direction: "right",
+            });
+        });
+
+        it("adds goal tooltip when goal value matches tick position and labels are hidden (undefined goal title)", () => {
+            mockOptions.label.show_goal_name = true;
+            mockOptions.goal.title = undefined;
+            mockOptions.label.show = false;
+            jest.spyOn(chart, "formatValue").mockReturnValue("100%");
+
+            chart.addTooltips(mockChart, mockOptions);
+
+            expect(mockInstance.add).toHaveBeenCalledWith('<span style="font-weight: 600">100%</span>', "goalIconElement", {
+                direction: "right",
+            });
+        });
+
+        it("adds goal tooltip when goal value matches tick position and labels are hidden (left direction)", () => {
+            mockOptions.label.show_goal_name = true;
+            mockOptions.label.show = false;
+            jest.spyOn(chart, "isLeftQuarter").mockReturnValue(true);
+            jest.spyOn(chart, "formatValue").mockReturnValue("100%");
+
+            chart.addTooltips(mockChart, mockOptions);
+
+            expect(mockInstance.add).toHaveBeenCalledWith('Goal<span style="font-weight: 600">100%</span>', "goalIconElement", {
+                direction: "left",
+            });
+        });
+
+        it("adds percentage tooltip to segment labels when show_percentage_in_segments is true", () => {
+            jest.spyOn(chart, "toPercent").mockReturnValue("100%");
+            mockOptions.tooltips.show_percentage_in_segments = true;
+            mockOptions.label.show_percentage_in_segments = false;
+            chart.addTooltips(mockChart, mockOptions);
+
+            expect(mockInstance.add).toHaveBeenCalledWith("100%", "label0", { direction: "left" });
+            expect(mockInstance.add).toHaveBeenCalledWith("100%", "label50", { direction: "left" });
+            expect(mockInstance.add).toHaveBeenCalledWith("100%", "label100", { direction: "right" });
+        });
+    });
+
+    describe("setPane", () => {
+        let mockChart;
+        let mockOptions;
+
+        beforeEach(() => {
+            // Mock the chart object
+            mockChart = {
+                pane: [{ options: { size: null, center: null } }],
+                yAxis: [
+                    {
+                        options: {
+                            plotBands: [{ outerRadius: null }, { outerRadius: null }],
+                        },
+                    },
+                ],
+                series: [{
+                    options: {
+                        dial: {
+                            radius: '80%'
+                        }
+                    }
+                }]
+            };
+
+            // Mock options
+            mockOptions = {
+                gauge: { tickLength: 20, thickness: 10 },
+            };
+
+            // Mock getPaneDimensions to return specific values
+            jest.spyOn(chart, "getPaneDimensions").mockReturnValue({
+                radius: 100,
+                center: ["50%", "50%"],
+            });
+        });
+
+        it("calls getPaneDimensions with correct arguments", () => {
+            const getPaneDimensionsSpy = jest.spyOn(chart, "getPaneDimensions");
+
+            chart.setPane(mockChart, mockOptions);
+
+            expect(getPaneDimensionsSpy).toHaveBeenCalledWith(mockChart, mockOptions);
+        });
+
+        it("updates the pane size and center based on dimensions", () => {
+            chart.setPane(mockChart, mockOptions);
+
+            expect(mockChart.pane[0].options.size).toBe(200); // 2 * radius
+            expect(mockChart.pane[0].options.center).toEqual(["50%", "50%"]);
+        });
+
+        it("updates the outerRadius of plot bands correctly", () => {
+            chart.setPane(mockChart, mockOptions);
+
+            const expectedOuterRadius = 100 - (20 - 10) / 2; // radius - (tickLength - thickness) / 2
+            mockChart.yAxis[0].options.plotBands.forEach((band) => {
+                expect(band.outerRadius).toBe(expectedOuterRadius);
+            });
+        });
+
+        it("updates the dial radius", () => {
+            chart.setPane(mockChart, mockOptions);
+
+            const expectedDialRadius = Math.round(100 * (100 - 20 - 10) / 100) + '%'; // radius - tickLength - offset) / radius
+            expect(mockChart.series[0].options.dial.radius).toBe(expectedDialRadius);
+        });
+
+        afterEach(() => {
+            jest.restoreAllMocks();
+        });
+    });
+
+    describe("setCustomElements", () => {
+        let mockChart;
+        let mockOptions;
+        let mockValueLabel;
+        let mockStartBorder;
+        let mockEndBorder;
+        let mockGoalIcon;
+
+        beforeEach(() => {
+            // Mock chart object
+            mockChart = {};
+
+            // Mock options
+            mockOptions = {
+                someOption: "value", // Add relevant options here
+            };
+
+            // Mock custom elements
+            mockValueLabel = { type: "valueLabel" };
+            mockStartBorder = { type: "startBorder" };
+            mockEndBorder = { type: "endBorder" };
+            mockGoalIcon = { type: "goalIcon" };
+
+            // Spy on class methods
+            jest.spyOn(chart, "createValueLabel").mockReturnValue(mockValueLabel);
+            jest.spyOn(chart, "createBorder").mockImplementation((chart, options, position) => {
+                if (position === "start") return mockStartBorder;
+                if (position === "end") return mockEndBorder;
+            });
+            jest.spyOn(chart, "createGoalIcon").mockReturnValue(mockGoalIcon);
+        });
+
+        afterEach(() => {
+            jest.restoreAllMocks();
+        });
+
+        it("assigns the value label to chart.label", () => {
+            chart.setCustomElements(mockChart, mockOptions);
+
+            expect(chart.createValueLabel).toHaveBeenCalledWith(mockChart, mockOptions);
+            expect(mockChart.label).toBe(mockValueLabel);
+        });
+
+        it("assigns the start border to chart.startBorder", () => {
+            chart.setCustomElements(mockChart, mockOptions);
+
+            expect(chart.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(mockChart.endBorder).toBe(mockEndBorder);
+        });
+
+        it("assigns the goal icon to chart.goalIcon", () => {
+            chart.setCustomElements(mockChart, mockOptions);
+
+            expect(chart.createGoalIcon).toHaveBeenCalledWith(mockChart, mockOptions);
+            expect(mockChart.goalIcon).toBe(mockGoalIcon);
+        });
+    });
+
+    describe("updateCustomElements", () => {
+        let mockChart;
+        let mockOptions;
+        let mockStartPosition;
+        let mockEndPosition;
+        let mockGoalIconPosition;
+        let mockValueLabelPosition;
+
+        beforeEach(() => {
+            // Mock chart object with elements having .attr method
+            mockChart = {
+                startBorder: { attr: jest.fn() },
+                endBorder: { attr: jest.fn() },
+                goalIcon: { attr: jest.fn() },
+                label: { attr: jest.fn() },
+            };
+
+            // Mock options
+            mockOptions = {
+                someOption: "value", // Add relevant options here
+            };
+
+            // Mock positions returned by helper methods
+            mockStartPosition = { x: 10, y: 20 };
+            mockEndPosition = { x: 30, y: 40 };
+            mockGoalIconPosition = { x: 50, y: 60 };
+            mockValueLabelPosition = { x: 70, y: 80 };
+
+            // Spy on helper methods
+            jest.spyOn(chart, "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);
+        });
+
+        afterEach(() => {
+            jest.restoreAllMocks();
+        });
+
+        it("updates startBorder attributes correctly", () => {
+            chart.updateCustomElements(mockChart, mockOptions);
+
+            expect(chart.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(mockChart.endBorder.attr).toHaveBeenCalledWith(mockEndPosition);
+        });
+
+        it("updates goalIcon attributes correctly", () => {
+            chart.updateCustomElements(mockChart, mockOptions);
+
+            expect(chart.getGoalIconPosition).toHaveBeenCalledWith(mockChart, mockOptions);
+            expect(mockChart.goalIcon.attr).toHaveBeenCalledWith(mockGoalIconPosition);
+        });
+
+        it("updates label attributes correctly", () => {
+            chart.updateCustomElements(mockChart, mockOptions);
+
+            expect(chart.getValueLabelPosition).toHaveBeenCalledWith(mockChart, mockOptions);
+            expect(mockChart.label.attr).toHaveBeenCalledWith(mockValueLabelPosition);
+        });
+    });
+
+    describe("moveCustomElementsToFront", () => {
+        let mockChart;
+
+        beforeEach(() => {
+            // Mock chart object with elements having .toFront method
+            mockChart = {
+                startBorder: { toFront: jest.fn() },
+                endBorder: { toFront: jest.fn() },
+                goalIcon: { toFront: jest.fn() },
+            };
+        });
+
+        afterEach(() => {
+            jest.clearAllMocks();
+        });
+
+        it("calls toFront on startBorder", () => {
+            chart.moveCustomElementsToFront(mockChart);
+            expect(mockChart.startBorder.toFront).toHaveBeenCalled();
+        });
+
+        it("calls toFront on endBorder", () => {
+            chart.moveCustomElementsToFront(mockChart);
+            expect(mockChart.endBorder.toFront).toHaveBeenCalled();
+        });
+
+        it("calls toFront on goalIcon", () => {
+            chart.moveCustomElementsToFront(mockChart);
+            expect(mockChart.goalIcon.toFront).toHaveBeenCalled();
+        });
+    });
+
+    describe("clampValueToPane", () => {
+        let mockMax;
+
+        beforeEach(() => {
+            // Mock max value
+            mockMax = 100;
+
+            // Spy on helpers.clamp
+            jest.spyOn(helpers, "clamp").mockImplementation((min, value, max) => {
+                if (value < min) return min;
+                if (value > max) return max;
+                return value;
+            });
+        });
+
+        afterEach(() => {
+            jest.restoreAllMocks();
+        });
+
+        it("calls helpers.clamp with correct bounds and value", () => {
+            const value = 50;
+            const result = chart.clampValueToPane(value, 100);
+
+            expect(helpers.clamp).toHaveBeenCalledWith(-2, value, 102);
+            expect(result).toBe(value); // Value is within range
+        });
+
+        it("returns clamped value when below range", () => {
+            const value = -10;
+            const result = chart.clampValueToPane(value, 100);
+
+            expect(helpers.clamp).toHaveBeenCalledWith(-2, value, 102);
+            expect(result).toBe(-2); // Clamped to minimum
+        });
+
+        it("returns clamped value when above range", () => {
+            const value = 200;
+            const result = chart.clampValueToPane(value, 100);
+
+            expect(helpers.clamp).toHaveBeenCalledWith(-2, value, 102);
+            expect(result).toBe(102); // Clamped to maximum
+        });
+
+        it("uses the deafult max umless it is provided", () => {
+            const value = 50;
+            const result = chart.clampValueToPane(value);
+
+            expect(helpers.clamp).toHaveBeenCalledWith(-3.6, value, 183.6);
+            expect(result).toBe(value); // Value is within range
+        });
+    });
+
+    describe("configChart", () => {
+        const mockChart = {};
+        const mockOptions = {
+            segments: [
+                {
+                    from: 0,
+                    to: 50,
+                    title: "Low",
+                    color: "#BF1D30",
+                },
+                {
+                    from: 51,
+                    to: 160,
+                    title: "Medium",
+                    color: "#FFA310",
+                },
+                {
+                    from: 161,
+                    to: 200,
+                    title: "High",
+                    color: "#037C5A",
+                },
+            ],
+            goal: {
+                name: "Goal",
+                value: 180,
+            },
+            isAbsoluteValue: true,
+            label: {
+                show: true,
+            },
+            gauge: {
+                background: "white",
+                tickLength: 40,
+                tickWidth: 20,
+                pivot: {
+                    color: "black",
+                    radius: 10,
+                },
+            },
+        };
+
+        beforeEach(() => {
+            chart = new DrGaugeChart(mockPivotData, {
+                chartOptions: mockOptions,
+            });
+        });
+
+        it("returns a configuration object with the correct structure", () => {
+            const config = chart.configChart();
+
+            expect(config).toBeInstanceOf(Object);
+            expect(config).toHaveProperty("title");
+            expect(config).toHaveProperty("subtitle");
+            expect(config).toHaveProperty("chart");
+            expect(config).toHaveProperty("pane");
+            expect(config).toHaveProperty("yAxis");
+            expect(config).toHaveProperty("series");
+        });
+
+        it("hides title", () => {
+            const config = chart.configChart();
+            expect(config.title).toEqual({
+                text: null,
+            });
+        });
+
+        it("hides subtitle", () => {
+            const config = chart.configChart();
+            expect(config.subtitle).toBe(null);
+        });
+
+        it("alllows HTML on export", () => {
+            const config = chart.configChart();
+            expect(config.exporting).toEqual({
+                allowHTML: true,
+            });
+        });
+
+        it("sets chart type", () => {
+            const config = chart.configChart();
+            expect(config.chart.type).toBe("gauge");
+        });
+
+        it("sets default chart options", () => {
+            const config = chart.configChart();
+
+            expect(config.chart.backgroundColor).toBe(mockOptions.gauge.background);
+            expect(config.chart.plotBackgroundColor).toBe(null);
+            expect(config.chart.plotBackgroundImage).toBe(null);
+            expect(config.chart.plotBorderWidth).toBe(0);
+            expect(config.chart.plotShadow).toBe(false);
+        });
+
+        it("removes default offsets", () => {
+            const config = chart.configChart();
+
+            expect(config.chart.margin).toEqual([0, 0, 0, 0]);
+            expect(config.chart.spacing).toEqual([0, 0, 0, 0]);
+        });
+
+        it("sets load event handler", () => {
+            const config = chart.configChart();
+            chart.addTooltips = jest.fn();
+            config.chart.events.load({ target: mockChart });
+            expect(chart.addTooltips).toHaveBeenCalled();
+        });
+
+        it("sets render event handler", () => {
+            const config = chart.configChart();
+            chart.moveCustomElementsToFront = jest.fn();
+            chart.setTicksStyles = jest.fn();
+            config.chart.events.render({ target: mockChart });
+            expect(chart.moveCustomElementsToFront).toHaveBeenCalled();
+            expect(chart.setTicksStyles).toHaveBeenCalled();
+        });
+
+        it("sets beforeRedraw event handler", () => {
+            const config = chart.configChart();
+            chart.setPane = jest.fn();
+            chart.updateCustomElements = jest.fn();
+            config.chart.events.beforeRedraw({ target: mockChart });
+            expect(chart.setPane).toHaveBeenCalled();
+            expect(chart.updateCustomElements).toHaveBeenCalled();
+        });
+
+        it("sets beforeRender event handler", () => {
+            const config = chart.configChart();
+            chart.setPane = jest.fn();
+            chart.setCustomElements = jest.fn();
+            config.chart.events.beforeRender({ target: mockChart });
+            expect(chart.setPane).toHaveBeenCalled();
+            expect(chart.setCustomElements).toHaveBeenCalled();
+        });
+
+        it("sets pane options", () => {
+            const config = chart.configChart();
+
+            expect(config.pane).toEqual({
+                startAngle: -90,
+                endAngle: 90,
+                background: null,
+                center: [0, 0],
+            });
+        });
+
+        it("sets yAxis default options", () => {
+            const config = chart.configChart();
+
+            expect(config.yAxis.min).toBe(0);
+            expect(config.yAxis.max).toBe(200);
+            expect(config.yAxis.tickPositions).toEqual([0, 50, 160, 180, 200]);
+            expect(config.yAxis.tickColor).toBe(mockOptions.gauge.background);
+            expect(config.yAxis.tickLength).toBe(40);
+            expect(config.yAxis.tickWidth).toBe(20);
+            expect(config.yAxis.minorTickInterval).toBe(null);
+            expect(config.yAxis.lineWidth).toBe(0);
+            expect(config.yAxis.plotBands).toEqual([
+                { color: "#BF1D30", from: 0, thickness: 16, title: "Low", to: 50 },
+                { color: "#FFA310", from: 50, thickness: 16, title: "Medium", to: 160 },
+                { color: "#037C5A", from: 160, thickness: 16, title: "High", to: 200 },
+            ]);
+        });
+
+        it("sets yAxis labels options", () => {
+            const config = chart.configChart();
+
+            expect(config.yAxis.labels.enabled).toBe(mockOptions.label.show);
+            expect(config.yAxis.labels.enabled).toBe(mockOptions.label.show);
+            expect(config.yAxis.labels.distance).toBe(0),
+                expect(config.yAxis.labels.verticalAlign).toBe("middle"),
+                expect(config.yAxis.labels.allowOverlap).toBe(true),
+                expect(config.yAxis.labels.align).toBe("left");
+            expect(config.yAxis.labels.style).toEqual({
+                whiteSpace: "nowrap",
+                width: "auto",
+            });
+            expect(config.yAxis.labels.useHTML).toBe(true);
+            chart.formatTickLabel = jest.fn().mockReturnValue("<span>100.00</span>");
+            expect(config.yAxis.labels.formatter({ value: 100 })).toBe("<span>100.00</span>");
+        });
+
+        it("sets series", () => {
+            chart.value = 204;
+            const series = chart.configChart().series[0];
+
+            expect(series.name).toBe(null);
+            expect(series.data).toEqual([204]);
+            expect(series.dataLabels).toEqual([
+                {
+                    enabled: false,
+                },
+            ]);
+            expect(series.dial).toEqual({
+                radius: "70%",
+                backgroundColor: mockOptions.gauge.pivot.color,
+                baseWidth: 2 * mockOptions.gauge.pivot.radius,
+                baseLength: "0%",
+                rearLength: "0%",
+            });
+            expect(series.pivot).toEqual({
+                backgroundColor: mockOptions.gauge.pivot.color,
+                radius: mockOptions.gauge.pivot.radius,
+            });
+        });
+    });
+});
+
+function simplifyString(str) {
+    return str.replace(/[\s\n\t]/g, "");
+}