[WWDC22] Swift Charts: Raise the bar

 

Swift Charts: Raise the bar - WWDC22 - Videos - Apple Developer

Swift Charts

• Data Visualization : 앱에 더 많은 정보를 포함시킬 수 있다.
• Communicate Data : 데이터를 완전히 반영할 수 있다.
• Accessible

• 선언형 문법으로 차트를 만들 수 있다.
• 커스터마이징 가능

Marks and composition

Swift Chart는 블럭들을 조합해서 다양한 차트를 만들 수 있다.

Mark : 데이터를 나타내는 시각적인 요소

실제로 사용할 때는 차트에 제공할 구조체나 튜플 배열을 전달하고, ForEach문을 써서 각 요소마다 mark를 생성한다.

ForEach가 차트의 유일한 컨텐츠라면 위와 같이 차트에 바로 데이터를 전달할 수 있다.

modifier

Mark에 많은 SwiftUI modifier를 적용할 수 있다.

• .foregroundStyle : mark 색깔
• .accessibilityLabel, .accessibilityValue : VoiceOver를 위해 커스터마이징 할 수 있는 modifier

• .symbol : mark에 기호를 붙여서 표시
• interpolationMethod : 선 그래프가 부드럽게 꺾이게 할 수 있다.

• .position : 바 차트에서 바가 표시되는 형식을 바꾼다.

.charYScale : 도메인의 값이 범위를 설정. 축을 보면 0~200까지만 나와있다.

.chartForgroundStyleScale : 각 요소의 색을 결정

switching chart type

선언형 문법 덕분에 차트 타입을 바꾸기 쉽다.

Marks

Swift Chart는 다양한 종류의 mark type을 지원하고, 이들을 조합해서 복잡한 차트를 만들 수 있다.

AreaMark를 사용해서 범위 그래프 표시 가능.

BarMark와 RectanlgeMark를 사용해서 바 내부에 직사각형 마크를 표시 가능. 추가로 width: .ratio(0.6) 과 같은 코드를 각 Mark에 적용해서 너비를 조정할 수도 있다.

RuleMark를 추가해서 가로 선을 차트에 나타내 평균 값을 보여주고, .annotation modifier를 통해 rule mark 위에 텍스트 라벨을 추가할 수 있다.

Plotting data with mark properties

• Quantitative : 숫자 값
• Nominal/Categorical : 카테고리, 그룹
• Temporal : 시간

X, Y 축의 데이터 타입에 따라 mark의 동작이 달라진다. 바의 방향은 숫자 데이터가 어떤 축에 있는지에 따라 달라진다.

Swift chart는 6개의 mark type, 6개의 mark property를 가지고 있다. 여기에 데이터 타입 세 개의 조합으로 다양한 형태의 그래프를 만들 수 있다.

Customizations

• axes, legends : 차트를 해석하게 돕는다.
• plot area : 두 축 사이의 영역으로 mark로 데이터를 나타낸다.

Swift Chart에서는 이들을 커스터마이징 할 수 있다.

Axes & legends

AxisMark를 사용해서 축을 커스터마이징할 수 있다.

stride(by:) : 월별 라벨을 추가
AxisValueLabel : 월별 라벨이 화면상에서 잘리는 것을 방지하기 위해 한 글자씩 나타나게 함

위와 같이 분기 별로 축 표현 가능

• charXAxis(.hidden) : 축을 보이지 않게 한다.
• charLegend(.hiddnet) : legend 영역을 보이지 않게 한다.

Plot area

.frame modifier 를 사용해서 Plot 영역이 특정 크기나 비율을 갖게 할 수 있다.

• .background : 배경색
• .border : 경계

X, Y scale에 접근할 수 있는 ChartProxy.

• position(for:) 메서드를 사용해서 주어진 데이터 값이 차트에 표시된 곳의 위치를 가져온다.
• value(at:) : 주어진 위치에 있는 데이터 값을 가져온다.

드래그로 차트 내의 영역을 선택해서 작업을 할 수 있게 할 수 있다. .chartOverlay나 .chartBackground modifier에서 chart proxy 객체를 가져올 수 있다.
SwiftUI의 overlay, background modifier랑 비슷하다고 한다.

• .chartOverlay modifier : chart proxy를 제공한다.
• GeometryReader : overlay view의 geometry에 접근할 수 있게 한다.
• Rectangle view : SwiftUI의 DragGesture에 응답하는 뷰

1. 드래그 제스처 시작 : startX, currentX로 시작점의 x, 차트의 plot area 내의 위치의 x좌표를 찾는다.
2. 구한 좌표를 통해 chart proxy를 사용해서 일치하는 Date 값을 찾고, SwiftUI state를 설정한다.

설정된 state에 따라 RectangleMark를 정의해 선택된 Date 범위를 시각화할 수 있다.

=> Design App Experiences with Charts, Design an Effective Chart 세션에서 더 확인 가능(디자인에 관련된 세션이다)