Heart Rate example #27
Conversation
Added picker to select Range Chart Data
Swift Charts Examples/Charts/RangeCharts/Heart Rate/HeartRateRangeChart.swift
Outdated
Show resolved
Hide resolved
|
Great job, was halfway doing this one myself. I have some sample data for a daily bpm, will share. |
There was a problem hiding this comment.
I've also done some work on this type of chart so I thought I'd point out some small improvement suggestions - basically how my implementation differs from yours.
Plus, I've created some data on a single-day-scale so I'll probably add a variation when this is merged 💪
| struct HeartRateRangeChartDetail: View { | ||
| @State var barWidth = 10.0 | ||
| @State var chartColor: Color = .red | ||
| @State var isShowingPoints: Bool = false |
There was a problem hiding this comment.
This is not used, is it?
| @State var isShowingPoints: Bool = false |
There was a problem hiding this comment.
Updated in fd0ad50. Thanks!
| AxisMarks(values: .stride(by: ChartStrideBy.day.time)) { _ in | ||
| AxisTick() | ||
| AxisGridLine() | ||
| AxisValueLabel(format: .dateTime.weekday(.abbreviated), centered: true) |
There was a problem hiding this comment.
The value in Apple's version is aligned to the tick/grid line
| AxisValueLabel(format: .dateTime.weekday(.abbreviated), centered: true) | |
| AxisValueLabel(format: .dateTime.weekday(.abbreviated)) |
There was a problem hiding this comment.
Updated in fd0ad50. Thanks!
| @ViewBuilder | ||
| private func makeHeader() -> some View { |
There was a problem hiding this comment.
I suggest to make this a computed property, just like the customisation view. Also, I don't think this needs to be a ViewBuilder, does it?
| @ViewBuilder | |
| private func makeHeader() -> some View { | |
| var header: some View { |
There was a problem hiding this comment.
Updated in fd0ad50. Thanks!
|
|
||
| }.fontWeight(.semibold) |
There was a problem hiding this comment.
| }.fontWeight(.semibold) | |
| } | |
| .fontWeight(.semibold) |
There was a problem hiding this comment.
Updated in fd0ad50. Thanks!
| AxisValueLabel(format: .dateTime.weekday(.abbreviated), centered: true) | ||
| } | ||
| } | ||
| .frame(height: 300) |
There was a problem hiding this comment.
| .frame(height: 300) | |
| .frame(height: 300) |
There was a problem hiding this comment.
Updated in fd0ad50. Thanks!
| x: .value("Day", $0.weekday, unit: .day), | ||
| yStart: .value("BPM Min", $0.dailyMin), | ||
| yEnd: .value("BPM Max", $0.dailyMax), | ||
| width: .fixed(10) |
There was a problem hiding this comment.
Should we use 6 here? I think it is what comes closest to Apple's version.
| width: .fixed(10) | |
| width: .fixed(6) |
There was a problem hiding this comment.
Updated in fd0ad50. Thanks!
|
I was also looking into this one. Not sure if the heart rate should be represented by a So if it skips out or couldn't measure one of your heart rates in between it will show up as a gap. Most of the time it will be a solid line but I think the current data set doesn't reflect a heart rate. So a very buggy heart rate measurement would turn into a lot of single dots. You can see this on the mobile watch on the 4th measurement. |
Yeah the data I used was just random data that isn't even related to actual bpm, which probably wasn't the best idea. I just wanted to see if I could replicate what it looked like from a glance. I think you are right about using a scatter graph, however I haven't tried it out myself. |
The existing Range Chart is capable of displaying Apple's heart rate chart in the Health app. Included is an example of a semi-complete version of it.
Apple's:
