Custom Progress View with Step progress - ios

Question

I'm trying to create following progress view.
I have write following code to make this view,
class SeggyProgressView: UIView {
//--------------------------------------------------
// MARK:- Variables
//--------------------------------------------------
var arrPointsRange = [0, 500, 1000, 1500, 2000, 2500, 3000]
var currenPoint = 1586
//--------------------------------------------------
// MARK:- Init Methods
//--------------------------------------------------
init() {
super.init(frame: .zero)
self.setupView()
}
//--------------------------------------------------
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
self.setupView()
}
//--------------------------------------------------
override init(frame: CGRect) {
super.init(frame: frame)
self.setupView()
}
//--------------------------------------------------
// MARK:- Custom Methods
//--------------------------------------------------
func setupView() {
let path = UIBezierPath()
// Add first point to x=10 and y=1/4 of view
let x: CGFloat = 50
var lineYPoint = self.bounds.height / 4
// Add starting point
path.move(to: CGPoint(x: x, y: lineYPoint))
// Calculate line width
let lineWidth = (self.bounds.width - (x * 2) - CGFloat(10 * (self.arrPointsRange.count - 2))) / CGFloat(self.arrPointsRange.count - 2)
// Keep it to store x value of
var lineXPoint = lineWidth
// Enumerated on point range to draw above lines and haf circle
for (index, _) in arrPointsRange.enumerated() {
if index < (self.arrPointsRange.count - 2) {
lineXPoint += lineWidth
path.addLine(to: CGPoint(x: lineXPoint, y: lineYPoint))
let arcCenterX = lineXPoint + 10
path.addArc(withCenter: CGPoint(x: arcCenterX, y: lineYPoint), radius: 8, startAngle: CGFloat(180.0).toRadians(), endAngle: CGFloat(0.0).toRadians(), clockwise: true)
}
}
lineXPoint += lineWidth
// Draw line line for above
path.addLine(to: CGPoint(x: lineXPoint, y: lineYPoint))
var arcCenterX = lineXPoint + 10
// draw full circle
path.addArc(withCenter: CGPoint(x: arcCenterX, y: lineYPoint), radius: 10, startAngle: CGFloat(210.0).toRadians(), endAngle: CGFloat(150.0).toRadians(), clockwise: true)
lineYPoint += 10
// Enumerate to draw below line and half circle
for (index, _) in arrPointsRange.enumerated() {
if index < (self.arrPointsRange.count - 2) {
lineXPoint -= lineWidth
path.addLine(to: CGPoint(x: lineXPoint, y: lineYPoint))
let arcCenterX = lineXPoint - 10
path.addArc(withCenter: CGPoint(x: arcCenterX, y: lineYPoint), radius: 8, startAngle: CGFloat(0.0).toRadians(), endAngle: CGFloat(180.0).toRadians(), clockwise: true)
}
}
lineXPoint -= lineWidth
// Draw first below line
path.addLine(to: CGPoint(x: lineXPoint, y: lineYPoint))
arcCenterX = lineXPoint - 10
let y = lineYPoint - 5
// Draw first full circle
path.addArc(withCenter: CGPoint(x: arcCenterX, y: y), radius: 10, startAngle: CGFloat(30).toRadians(), endAngle: CGFloat(300).toRadians(), clockwise: true)
path.close()
let shapeLayer = CAShapeLayer()
shapeLayer.path = path.cgPath
shapeLayer.strokeColor = UIColor.darkGray.cgColor
shapeLayer.lineWidth = 3
shapeLayer.fillColor = UIColor.orange.cgColor
self.layer.addSublayer(shapeLayer)
}
}
extension CGFloat {
func toRadians() -> CGFloat {
return self * CGFloat(Double.pi) / 180.0
}
}
But I can't make exactly as above, I have following output.
Anyone know how to fix this ?