diff --git a/src/assets/json/en/ios/wwdc/ios-wwdc-listnota11y.json b/src/assets/json/en/ios/wwdc/ios-wwdc-listnota11y.json index f72d15e87..ef900dfda 100644 --- a/src/assets/json/en/ios/wwdc/ios-wwdc-listnota11y.json +++ b/src/assets/json/en/ios/wwdc/ios-wwdc-listnota11y.json @@ -32,6 +32,17 @@ "raccourcis": "2023/23SwiftMacros", "profils": ["All","Swift"] }, + { + "themes": "WWDC 2023", + "title": "Explore pie charts and interactivity in Swift Charts", + "type": ["Charts"], + "tests": [], + "verifier": [], + "resultat": [], + "exception": "", + "raccourcis": "2023/2310037", + "profils": ["All","Swift","SwiftUI"] + }, { "themes": "WWDC 2023", "title": "Generalize APIs with parameter packs", diff --git a/src/en/mobile/images/iOSdev/wwdc23-10037_1.png b/src/en/mobile/images/iOSdev/wwdc23-10037_1.png new file mode 100644 index 000000000..4c61e55cd Binary files /dev/null and b/src/en/mobile/images/iOSdev/wwdc23-10037_1.png differ diff --git a/src/en/mobile/images/iOSdev/wwdc23-10037_2.png b/src/en/mobile/images/iOSdev/wwdc23-10037_2.png new file mode 100644 index 000000000..4ea5a3e9d Binary files /dev/null and b/src/en/mobile/images/iOSdev/wwdc23-10037_2.png differ diff --git a/src/en/mobile/images/iOSdev/wwdc23-10037_3.png b/src/en/mobile/images/iOSdev/wwdc23-10037_3.png new file mode 100644 index 000000000..f217362be Binary files /dev/null and b/src/en/mobile/images/iOSdev/wwdc23-10037_3.png differ diff --git a/src/en/mobile/images/iOSdev/wwdc23-10037_4.png b/src/en/mobile/images/iOSdev/wwdc23-10037_4.png new file mode 100644 index 000000000..15f7f88e0 Binary files /dev/null and b/src/en/mobile/images/iOSdev/wwdc23-10037_4.png differ diff --git a/src/en/mobile/images/iOSdev/wwdc23-10037_5.png b/src/en/mobile/images/iOSdev/wwdc23-10037_5.png new file mode 100644 index 000000000..360f63da6 Binary files /dev/null and b/src/en/mobile/images/iOSdev/wwdc23-10037_5.png differ diff --git a/src/en/mobile/images/iOSdev/wwdc23-10037_6.png b/src/en/mobile/images/iOSdev/wwdc23-10037_6.png new file mode 100644 index 000000000..959aa3406 Binary files /dev/null and b/src/en/mobile/images/iOSdev/wwdc23-10037_6.png differ diff --git a/src/en/mobile/images/iOSdev/wwdc23-10037_7.png b/src/en/mobile/images/iOSdev/wwdc23-10037_7.png new file mode 100644 index 000000000..be0dfd326 Binary files /dev/null and b/src/en/mobile/images/iOSdev/wwdc23-10037_7.png differ diff --git a/src/en/mobile/images/iOSdev/wwdc23-10037_Poster.png b/src/en/mobile/images/iOSdev/wwdc23-10037_Poster.png new file mode 100644 index 000000000..c58a30810 Binary files /dev/null and b/src/en/mobile/images/iOSdev/wwdc23-10037_Poster.png differ diff --git a/src/en/mobile/ios/wwdc/nota11y/2023/2310037.md b/src/en/mobile/ios/wwdc/nota11y/2023/2310037.md new file mode 100644 index 000000000..31f3f485c --- /dev/null +++ b/src/en/mobile/ios/wwdc/nota11y/2023/2310037.md @@ -0,0 +1,67 @@ +--- +title : "Explore pie charts and interactivity in Swift Charts" +abstract: "Learn how to make your charts scrollable, explore the chart selection API for revealing additional details in your data." + +displayToc: true +--- + +# WWDC 2023: Explore pie charts and interactivity in Swift Charts +Find hereafter a detailed summary of a video that belongs to a [taxonomy of some WWDC footages](../../). + +The original video is available on the **Apple official website** ([session 10037](https://developer.apple.com/videos/play/wwdc2023/10037/)). +![](../../../../../images/iOSdev/wwdc23-10037_Poster.png) +"**Swift Charts** has come full circle: Get ready to bake up pie and donut charts in your app with the latest improvements to the framework. Learn how to make your **charts scrollable**, explore the chart selection API for revealing **additional details in your data**, and find out how enabling additional **interactivity** can make your charts even more delightful." +
Hereafter, the underlined elements lead directly to the playback of the WWDC video at the appropriate moment. +
+ +## [New chart](https://developer.apple.com/videos/play/wwdc2023/10037?time=19) +With [strong arguments](https://developer.apple.com/videos/play/wwdc2023/10037?time=46) regarding its usage, the **pie chart** joins the `Swift` `Charts` family along with the new **[SectorMark type](https://developer.apple.com/videos/play/wwdc2023/10037?time=66)**. + +![](../../../../../images/iOSdev/wwdc23-10037_1.png) + +Through the [polar space](https://developer.apple.com/videos/play/wwdc2023/10037?time=87), a pie chart can turn into a **donut chart** for an original rendering. + +![](../../../../../images/iOSdev/wwdc23-10037_2.png) + +[Few lines of code](https://developer.apple.com/videos/play/wwdc2023/10037?time=106) are necessary to convert a simple chart into a basic pie chart. + +![](../../../../../images/iOSdev/wwdc23-10037_3.png) + +And the way to get a **[donut chart](https://developer.apple.com/videos/play/wwdc2023/10037?time=207)** is just as simple as the implemented modifications hereabove. + +![](../../../../../images/iOSdev/wwdc23-10037_4.png) +
+ +## [Selection](https://developer.apple.com/videos/play/wwdc2023/10037?time=259) +To render a popover on top of a selection indicator, follow the milestones hereafter by keeping in mind that the `chartOverlay` modifier is replaced by the **[chartXSelection](https://developer.apple.com/videos/play/wwdc2023/10037?time=326)** modifier as an `iOS` `17` new feature: + +1. Use the new **selection modifier** to get the X-axis raw value ⟹ 🎬 + +2. Create a **rule mark** as a selection indicator for the taken value ⟹ 🎬 + +3. Use an **annotation** for displaying the sought popover ⟹ 🎬 + +![](../../../../../images/iOSdev/wwdc23-10037_6.png) + +Instead of a single value, a **range can also be selected** through [dedicated gestures](https://developer.apple.com/videos/play/wwdc2023/10037?time=427) according to the system you're working on while implementing [customed gestures](https://developer.apple.com/videos/play/wwdc2023/10037?time=441) as well. + +**Pie charts** and **donuts charts** follow the exact [same rules](https://developer.apple.com/videos/play/wwdc2023/10037?time=452) for providing the above detailed selection. + +![](../../../../../images/iOSdev/wwdc23-10037_5.png) + +This kind of selection is also **supported on `macOS`** using a [hover gesture](https://developer.apple.com/videos/play/wwdc2023/10037?time=419) as default instead. +
+ +## [Scrolling](https://developer.apple.com/videos/play/wwdc2023/10037?time=472) +`iOS` `17` has brought many enhancements for scrolling with `Swift` `Charts` and the example detailed in this part of the video highlights few of them through different steps: + +1. **Enable scrolling** ⟹ 🎬 + +2. Plan the **range of data to be visible** on the X-axis ⟹ 🎬 + +3. **Store** the selected data to a **binding** ⟹ 🎬 + +4. Adapt the **scroll behavior** according to the expectations ⟹ 🎬 + +![](../../../../../images/iOSdev/wwdc23-10037_7.png) +
\ No newline at end of file diff --git a/src/en/mobile/ios/wwdc/nota11y/index.md b/src/en/mobile/ios/wwdc/nota11y/index.md index a5d3d9c5c..22be9c2ec 100644 --- a/src/en/mobile/ios/wwdc/nota11y/index.md +++ b/src/en/mobile/ios/wwdc/nota11y/index.md @@ -24,8 +24,9 @@ The videos that may be of interest to **designers** are highlighted with a **ded