Monday, June 10, 2024
HomeiOS Developmentios - SwiftCharts additional line operating via the underside of line charts

ios – SwiftCharts additional line operating via the underside of line charts


I’ve 2 line charts in SwiftCharts that present the person’s time asleep and whole time in mattress. If you first see the chart, it seems regular, however if you click on on the totally different buttons (they’re NavigationLinks) a random curved line comes on the backside of it. It additionally seems when clicking on the toolbar gadgets.

earlier than

after

The road chart is meant to look regular, however after urgent buttons, it makes a bizarre line. I’ve a chartXSelection which exhibits an annotation view, and when dragging via the chart, it disappears, however if you keep on the identical worth for a number of seconds, it seems once more (could not take a screenshot as a result of it disappears after transferring the mouse away)

That is my code, with the annotation view:

var physique: some View {
        VStack {
            NavigationLink(worth: selectedStat) {
                HStack {
                    VStack(alignment: .main) {
                        Label("Time Asleep", systemImage: "mattress.double.fill")
                            .font(.title3.daring())
                            .foregroundStyle(.cyan)
                        
                        Textual content("Avg: (formatTime(seconds: avgSleep, showDecimal: true))")
                            .font(.caption)
                    }
                    
                    Spacer()
                    
                    Picture(systemName: "chevron.proper")
                }
            }
            .foregroundStyle(.secondary)
            .padding(.backside, 12)
            
            Chart {
                if let selectedHealthMetric {
                    RuleMark(x: .worth("Chosen Metric", selectedHealthMetric.date, unit: .day))
                        .foregroundStyle(Coloration.secondary.opacity(0.3))
                        .offset(y: -10)
                        .annotation(place: .high,
                                    spacing: 0,
                                    overflowResolution: .init(x: .match(to: .chart), y: .disabled)) { annotationView }
                }
                
                RuleMark(y: .worth("Common", avgSleep))
                    .foregroundStyle(.mint)
                    .lineStyle(.init(lineWidth: 1, sprint: [5]))
                
                ForEach(chartData) { sleep in
                    LineMark(
                        x: .worth("Day", sleep.date, unit: .day),
                        y: .worth("Time Asleep", sleep.worth)
                    )
                    .foregroundStyle(.cyan)
                    .interpolationMethod(.catmullRom)
                    .image(.circle)
                    
                    AreaMark(
                        x: .worth("Day", sleep.date, unit: .day),
                        yStart: .worth("Worth", sleep.worth),
                        yEnd: .worth("Min Worth", minValue)
                    )
                    .foregroundStyle(Gradient(colours: [.cyan.opacity(0.5), .clear]))
                    .interpolationMethod(.catmullRom)
                }
            }
            .body(top: 150)
            .chartXSelection(worth: $rawSelectedDate.animation(.easeInOut))
            .chartXAxis {
                AxisMarks {
                    AxisValueLabel(format: .dateTime.month(.defaultDigits).day())
                }
            }
            .chartYAxis {
                AxisMarks { worth in
                    AxisGridLine()
                        .foregroundStyle(Coloration.secondary.opacity(0.3))
                    
                    AxisValueLabel("(formatTime(seconds: worth.as(Double.self) ?? 0, showDecimal: true))")
                }
            }
            .chartYScale(area: .computerized(includesZero: false))
        }
        .padding()
        .background(RoundedRectangle(cornerRadius: 12).fill(Coloration(.secondarySystemBackground)))
    }
    
    var annotationView: some View {
        VStack(alignment: .main) {
            Textual content(selectedHealthMetric?.date ?? .now, format: .dateTime.weekday(.abbreviated).month(.abbreviated).day())
                .font(.footnote.daring())
                .foregroundStyle(.secondary)
            
            Textual content(formatTime(seconds: selectedHealthMetric?.worth ?? 0))
                .fontWeight(.heavy)
                .foregroundStyle(.cyan)
        }
        .padding(12)
        .background(
            RoundedRectangle(cornerRadius: 4)
                .fill(Coloration(.secondarySystemBackground))
                .shadow(shade: .secondary.opacity(0.3), radius: 2, x: 2, y: 2)
        )
    }



Supply hyperlink

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments