@datarailsshared/dr_renderer 1.5.159 → 1.5.168

package/tests/dr_gauge_chart.test.js

@@ -1,2041 +0,0 @@
-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";
-let disableChartAnimation = false;
-
-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,
-    }),
-    environment: {
-        enableGaugeDynamicGoal: false,
-    },
-    disableChartAnimations: jest.fn((value) => disableChartAnimation = value),
-    chartAnimationsDisabled: jest.fn(() => disableChartAnimation),
-};
-
-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();
-        });
-
-        it("disables chart animations by demand", () => {
-            chart.render();
-            expect(DrGaugeChart.highchartsRenderer.chartAnimationsDisabled).toHaveBeenCalledTimes(2);
-        });
-    });
-
-    describe("isLeftQuarter", () => {
-        it("should check in which quarter the chart value is", () => {
-            expect(chart.isLeftQuarter(20, 100, 0)).toBe(true);
-            expect(chart.isLeftQuarter(20, 30, 0)).toBe(false);
-            expect(chart.isLeftQuarter(20, 20, 0)).toBe(false);
-            expect(chart.isLeftQuarter(100, 200, 0)).toBe(false);
-            expect(chart.isLeftQuarter(99, 200, 0)).toBe(true);
-
-            expect(chart.isLeftQuarter(59, 100, 20)).toBe(true);
-            expect(chart.isLeftQuarter(60, 100, 20)).toBe(false);
-        });
-
-        it("should use default #max  and #min parameters", () => {
-            // Max = 180
-            // Min = 0
-            expect(chart.isLeftQuarter(20)).toBe(true);
-            expect(chart.isLeftQuarter(120)).toBe(false);
-        });
-    });
-
-    describe("createPlotBands", () => {
-        afterEach(() => {
-            DrGaugeChart.highchartsRenderer.environment.enableGaugeDynamicGoal = false;
-        })
-
-        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: 200,
-                            to: 400,
-                            color: "blue",
-                            title: "Title 2",
-                        },
-                        {
-                            from: 400,
-                            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 (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: 200,
-                            to: 400,
-                            color: "blue",
-                            title: "Title 2",
-                        },
-                        {
-                            from: 400,
-                            to: 800,
-                            color: "blue",
-                            title: "Title 3",
-                        },
-                    ],
-                })
-            ).toEqual([
-                {
-                    from: 100,
-                    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: 50,
-                            to: 100,
-                            color: "blue",
-                            title: "Title 2",
-                        },
-                        {
-                            from: 100,
-                            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",
-                },
-            ]);
-        });
-
-        it("scales by needle magnitude when goal is 0 in percentage mode", () => {
-            chart.value = 250;
-            expect(
-                chart.createPlotBands({
-                    isAbsoluteValue: false,
-                    gauge: { thickness: 10 },
-                    goal: { value: 0 },
-                    segments: [
-                        { from: 0, to: 50, color: "red", title: "Title 1" },
-                        { from: 50, to: 100, color: "blue", title: "Title 2" },
-                    ],
-                })
-            ).toEqual([
-                { from: 0, to: 125, color: "red", thickness: 10, title: "Title 1" },
-                { from: 125, to: 250, color: "blue", thickness: 10, title: "Title 2" },
-            ]);
-        });
-
-        it("scales by absolute needle magnitude when goal is not a number", () => {
-            DrGaugeChart.highchartsRenderer.environment.enableGaugeDynamicGoal = true;
-
-            chart.value = -300;
-            const res = chart.createPlotBands({
-                isAbsoluteValue: false,
-                gauge: { thickness: 8 },
-                goal: { value: undefined },
-                segments: [
-                    { from: 0, to: 50, color: "#1", title: "A" },
-                    { from: 50, to: 100, color: "#2", title: "B" },
-                ],
-            });
-
-            expect(res).toEqual([
-                { from: 0, to: 150, color: "#1", thickness: 8, title: "A" },
-                { from: 150, to: 300, color: "#2", thickness: 8, title: "B" },
-            ]);
-        });
-
-        it("normalizes bands when goal is negative in percentage mode", () => {
-            const res = chart.createPlotBands({
-                isAbsoluteValue: false,
-                gauge: { thickness: 12 },
-                goal: { value: -1000 },
-                segments: [
-                    { from: 0, to: 50, color: "r", title: "S1" },
-                    { from: 50, to: 100, color: "b", title: "S2" },
-                ],
-            });
-
-            expect(res[0].from).toBe(-500);
-            expect(Math.abs(res[0].to)).toBe(0);
-            expect(res[0].color).toBe("r");
-            expect(res[0].thickness).toBe(12);
-            expect(res[0].title).toBe("S1");
-
-            expect(res[1]).toEqual({ from: -1000, to: -500, color: "b", thickness: 12, title: "S2" });
-        });
-
-        it("does not clamp last segment when dynamic goal feature is enabled", () => {
-            DrGaugeChart.highchartsRenderer.environment.enableGaugeDynamicGoal = true;
-
-            const res = chart.createPlotBands({
-                isAbsoluteValue: true,
-                gauge: { thickness: 10 },
-                goal: { value: 1800 },
-                segments: [
-                    { from: 100, to: 200, color: "red", title: "Title 1" },
-                    { from: 200, to: 400, color: "blue", title: "Title 2" },
-                    { from: 400, to: 800, color: "green", title: "Title 3" },
-                ],
-            });
-
-            expect(res).toEqual([
-                { from: 100, 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: "green", thickness: 10, title: "Title 3" },
-            ]);
-        });
-    });
-
-    describe("createTicks", () => {
-        it("should create a ticks array", () => {
-            expect(
-                DrGaugeChart.createTicks(
-                    [
-                        {
-                            to: 100,
-                        },
-                        {
-                            to: 150,
-                        },
-                        {
-                            to: 200,
-                        },
-                    ],
-                    {
-                        goal: {
-                            value: 180,
-                        },
-                    }
-                )
-            ).toEqual([0, 100, 150, 180, 200]);
-        });
-
-        it("should sort and remove duplicates", () => {
-            expect(
-                DrGaugeChart.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.3em; 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.3em; 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(DrGaugeChart.getValue(mockPivotData, {})).toBe(mockAggregationValue);
-        });
-
-        it("should return value to display", () => {
-            DrGaugeChart.highchartsRenderer.ptCreateBasicLineSeries.mockReturnValue([{ data: [2000] }]);
-            expect(DrGaugeChart.getValue(mockPivotData, {})).toBe(2000);
-        });
-
-        it("should calculate total", () => {
-            DrGaugeChart.highchartsRenderer.ptCreateBasicLineSeries.mockReturnValue([
-                { data: [2000] },
-                { data: [3000] },
-                { data: [5000] },
-            ]);
-            expect(DrGaugeChart.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(DrGaugeChart.getBorderPosition(mockChart, mockOptions, "start")).toEqual({
-                x: 170,
-                y: 201,
-            });
-        });
-
-        it("return an end border position", () => {
-            expect(DrGaugeChart.getBorderPosition(mockChart, mockOptions, "end")).toEqual({
-                x: 230,
-                y: 201,
-            });
-        });
-    });
-
-    describe("createBorder", () => {
-        beforeEach(() => {
-            DrGaugeChart.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", () => {
-            DrGaugeChart.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", () => {
-            DrGaugeChart.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(
-                DrGaugeChart.getValueLabelPosition(
-                    {
-                        pane: [
-                            {
-                                options: {
-                                    center: [500, 300],
-                                },
-                            },
-                        ],
-                    },
-                    {
-                        gauge: {
-                            valueOffset: [20, 30, 40, 30],
-                        },
-                    }
-                )
-            ).toEqual({
-                x: 500,
-                y: 320,
-            });
-
-            expect(
-                DrGaugeChart.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>");
-            DrGaugeChart.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(),
-                                },
-                            },
-                            180: {
-                                pos: 180,
-                                label: {
-                                    css: jest.fn(),
-                                },
-                                mark: {
-                                    attr: 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: {
-                            180: {
-                                pos: 180,
-                                mark: {
-                                    attr: jest.fn(),
-                                },
-                                label: {
-                                    css: jest.fn(),
-                                },
-                            },
-                        },
-                    },
-                ],
-            };
-
-            chart.setTicksStyles(mockChart, {
-                gauge: {
-                    colors: {
-                        goal: "blue",
-                    },
-                },
-                goal: {
-                    value: 180,
-                },
-            });
-            // add a goal tick styles
-            expect(mockChart.yAxis[0].ticks[180].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(DrGaugeChart, "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(DrGaugeChart.createBorder).toHaveBeenCalledWith(mockChart, mockOptions, "start");
-            expect(mockChart.startBorder).toBe(mockStartBorder);
-        });
-
-        it("assigns the end border to chart.endBorder", () => {
-            chart.setCustomElements(mockChart, mockOptions);
-
-            expect(DrGaugeChart.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(DrGaugeChart, "getBorderPosition").mockImplementation((chart, options, position) => {
-                if (position === "start") return mockStartPosition;
-                if (position === "end") return mockEndPosition;
-            });
-            jest.spyOn(chart, "getGoalIconPosition").mockReturnValue(mockGoalIconPosition);
-            jest.spyOn(DrGaugeChart, "getValueLabelPosition").mockReturnValue(mockValueLabelPosition);
-        });
-
-        afterEach(() => {
-            jest.restoreAllMocks();
-        });
-
-        it("updates startBorder attributes correctly", () => {
-            chart.updateCustomElements(mockChart, mockOptions);
-
-            expect(DrGaugeChart.getBorderPosition).toHaveBeenCalledWith(mockChart, mockOptions, "start");
-            expect(mockChart.startBorder.attr).toHaveBeenCalledWith(mockStartPosition);
-        });
-
-        it("updates endBorder attributes correctly", () => {
-            chart.updateCustomElements(mockChart, mockOptions);
-
-            expect(DrGaugeChart.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(DrGaugeChart.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, 0);
-
-            expect(helpers.clamp).toHaveBeenCalledWith(-2, value, 102);
-            expect(result).toBe(value); // Value is within range
-        });
-
-        it("returns clamped value when below range", () => {
-            const value = -1000;
-            const result = chart.clampValueToPane(value, 100, -100);
-
-            expect(helpers.clamp).toHaveBeenCalledWith(-104, value, 104);
-            expect(result).toBe(-104); // Clamped to minimum
-        });
-
-        it("returns clamped value when above range", () => {
-            const value = 200;
-            const result = chart.clampValueToPane(value, 100, -100);
-
-            expect(helpers.clamp).toHaveBeenCalledWith(-104, value, 104);
-            expect(result).toBe(104); // 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: 50,
-                    to: 160,
-                    title: "Medium",
-                    color: "#FFA310",
-                },
-                {
-                    from: 160,
-                    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(false),
-                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, "");
-}