Add a section where we recreate certain Apple app charts

jordibruin / Swift-Charts-Examples

An overview of the different types of charts you can make with Swift Charts

MIT License

2.08k stars 131 forks source link

Add a section where we recreate certain Apple app charts #77

Open jordibruin opened 2 years ago

jordibruin commented 2 years ago

I think it could be a nice challenge / addition to the repo if we have a section in the app where we recreate common charts used throughout iOS.

Think screen time, battery, iCloud usage, weather etc

atrinh0 commented 2 years ago

I love this idea, maybe a section on the top labelled "Apple" and recreate each one and try to find more!! 💪🏻

.	.






	.

jordibruin commented 2 years ago

@lekawik made a great first start!!

atrinh0 commented 2 years ago

This chart is hot 🔥

ios-16-sleep-info

Source: https://www.macrumors.com/guide/ios-16-health-app/

atrinh0 commented 2 years ago

Cycling elevation chart

apple-maps-cycling-directions

Source: https://www.macrumors.com/2022/08/02/apple-maps-cycling-directions-50-states/

bdruth commented 2 years ago

This chart is hot 🔥

Source: https://www.macrumors.com/guide/ios-16-health-app/

Any idea what's being used to connect the bar marks on this?

nonameplum commented 1 year ago

This chart is hot 🔥

Source: https://www.macrumors.com/guide/ios-16-health-app/

Any idea what's being used to connect the bar marks on this?

Same question. Any idea how the sleep chart could be tackled? Any evidence that this graph is created using swift charts framework?

chengjunzhang61 commented 1 year ago

This chart is hot 🔥

Source: https://www.macrumors.com/guide/ios-16-health-app/

Any idea what's being used to connect the bar marks on this?

Same question. Any idea how the sleep chart could be tackled? Any evidence that this graph is created using swift charts framework?

Any idea how the sleep chart could be tackled?

nonameplum commented 1 year ago

I have asked during the "Ask" sessions and Apple's engineer told me that the current Swift Charts API doesn't give such abilities to build a similar chart to Healt's app sleep graph. Maybe by creating overlays something similar could be achieved.

nonameplum commented 8 months ago

Custom masking shapes on RectangleMark can make the chart similar to sleep one. Also, you can even create a mask on the whole plot area and mask using the chart content and apply one linear gradient. Here is an example that I achieved on iOS 16.0

https://github.com/jordibruin/Swift-Charts-Examples/assets/1753816/2635402e-0882-4aa6-a543-bc2d8e608bf7

mitchellporter commented 4 months ago

Custom masking shapes on RectangleMark can make the chart similar to sleep one. Also, you can even create a mask on the whole plot area and mask using the chart content and apply one linear gradient. Here is an example that I achieved on iOS 16.0

Simulator.Screen.Recording.-.iPhone.15.-.2024-02-08.at.10.25.09.mp4

@nonameplum Any chance you can share sample code for how you achieved this? I have been trying in a demo project but can't seem to figure it out.

Thanks!