Fixed tick text overlapping over tick line for certain values

[anvilyard]

Hello,

Thank you for the time you are spending to maintain this library.

How to reproduce the bug

This issue can be replicated using the following code :

            <GaugeComponent
                type="semicircle"
                pointer={{type: "blob"}}
                labels={{
                    valueLabel: {
                        style: {
                            fontSize: "50px",
                            // fontWeight: "",
                            textShadow: "",
                            fill: "#533B4D" // Setting the color
                        }
                    },
                    tickLabels: {
                        type: "outer",
                    }
                }}
                arc={{
                    subArcs:
                        [
                            {
                                limit: 7.2,
                                color: "#3D5467"
                            },
                            {
                                limit: 8.5,
                                color: "#F1EDEE"
                            },

                        ]
                }
                }
                value={7.2}
                maxValue={8.5}
                minValue={4.3}
            />

Notice how the minimum value overlaps with the tick mark due to the anchor being pinned to the opposite anchor point:

For other values, for example minValue 4.1, the anchor is set correctly:

Fix

After applying the fix, the anchor point should now be correctly determined by checking if the label is in the < 50% side of the semicircle.

Notes

The change to utils.ts is not related to this bug. calculatePercentage is expected to return values between 0 and 1, but the value > maxValue branch was returning 100.

[antoniolago]

LGTM, I appreciate it 🙇‍♂️ launched in v1.2.21