Creating a navigation link within a chart?

Question

MSans OP

Created Jun ’24

Replies 3

Boosts 0

Participants 3

I’d like to create a simple Gantt chart where each horizontal BarMark is a navigation link to a detail view.

When I embed a navigation link within a chart, I get the error “Static method 'buildExpression' requires that 'some ChartContent' conform to 'View’”

       NavigationLink(value: taskGroup) {
        BarMark(
          xStart: .value("Start", taskGroup.start),
          xEnd: .value("End", taskGroup.end),
          y: .value("Event", taskGroup.taskGroupName),
          height: barHeight
        )
      }

I could use a chart overlay and manage the navigation from there, but it appears I can only grab published chart data at a given tap gesture. I need the object itself to inject into the detail view (in this case TaskGroup) and the data I’m plotting in the chart isn’t unique - so no obvious way to identify which TaskGroup the user tapped.

Boost

Answer 1

Claude31 OP

Jun ’24

I have not tried it, so I can't say if it works in your case.

You could try to use chartOverlay as described in doc, and use it to get in a State var where you tapped and then move to the view according to this known tap point.:

 Chart(data) {
    LineMark(
        x: .value("date", $0.date),
        y: .value("price", $0.price)
    )
}
.chartOverlay { proxy in
    GeometryReader { geometry in
        Rectangle().fill(.clear).contentShape(Rectangle())
            .gesture(
                DragGesture()
                    .onChanged { value in
                        // Convert the gesture location to the coordinate space of the plot area.
                        let origin = geometry[proxy.plotAreaFrame].origin
                        let location = CGPoint(
                            x: value.location.x - origin.x,
                            y: value.location.y - origin.y
                        )
                        // Get the x (date) and y (price) value from the location.
                        let (date, price) = proxy.value(at: location, as: (Date, Double).self)
                        print("Location: \(date), \(price)")
                    }
            )
    }
}

Another tutorial here: https://swiftwithmajid.com/2023/02/06/mastering-charts-in-swiftui-interactions/

Hope that can help.

0

Answer 2

MSans OP

Jun ’24

Thanks. That does’t work here though because I’m not plotting any data to the chart that uniquely identifies a given object (TaskGroup in my case) - just a name and some dates. I need to uniquely identify the TaskGroup being tapped to inject it into the detail view. I can’t really plot a UUID or a reference to the TaskGroup itself...

0

Answer 3

OP

Apple

Jun ’24

Have you tried an .overlay (with SwiftUI View content) on the mark itself?

In any case, if you get stuck with the task, please file a feedback, with a minimal reproducer, and what blockers exist to make it work on your end (including workarounds you tried), and (though you likely referenced the entire group) why it's not possible to uniquely identify something (I assume each plotted task is unique, and you want to navigate to that task)

0

	NavigationLink(value: taskGroup) {
	BarMark(
	xStart: .value("Start", taskGroup.start),
	xEnd: .value("End", taskGroup.end),
	y: .value("Event", taskGroup.taskGroupName),
	height: barHeight
	)
	}

	Chart(data) {
	LineMark(
	x: .value("date", $0.date),
	y: .value("price", $0.price)
	)
	}
	.chartOverlay { proxy in
	GeometryReader { geometry in
	Rectangle().fill(.clear).contentShape(Rectangle())
	.gesture(
	DragGesture()
	.onChanged { value in
	// Convert the gesture location to the coordinate space of the plot area.
	let origin = geometry[proxy.plotAreaFrame].origin
	let location = CGPoint(
	x: value.location.x - origin.x,
	y: value.location.y - origin.y
	)
	// Get the x (date) and y (price) value from the location.
	let (date, price) = proxy.value(at: location, as: (Date, Double).self)
	print("Location: \(date), \(price)")
	}
	)
	}
	}