SwiftChartsを利用してよく見るUIをつくってみる ~GraphRangeSlider~

tags

iOS

author

category

ios

mainImage

publishedAt

Oct 23, 2024

published

published

slug

graph-range-slider-20241023

authorDisplayName

Tomoki Takahashi

よくみる “あのUI” について

Booking / カーセンサー

• スライダーの移動範囲はグラフの位置に合わせてカクカクと動く。

• 選択範囲に対してグラフに色がついたりはしない。

• 範囲が変更されたときにHaptic Feedbackを用いたインタラクションがある(Bookingのみ)

Airbnb

• スライダーの移動範囲はグラフの決まった位置では止まらず滑らかに動く

• 選択範囲に対してグラフには色がつく

• 選択範囲のグラフに色がつくかどうか

• スライダーの動きは滑らかor 指定位置のみ

• (HapticFeedbackの有無)

SwiftCharts

SwiftUI x SwiftCharts での実装

NEWTの開発環境

• Xcode16, iOS16+, SwiftUI, Swift5.10 / 6

基本的なグラフの描画方法

struct ContentView: View {
	struct Data {
		let x: Int
		let y: Int
	}
	
	let data: [Data]
	
	var body: some View {
		Chart(data, id: \.x) { data in
	    BarMark(
	      x: .value("x", "\(data.x)"),
        y: .value("y", data.y),
      )
		)                   
	}
}

今回の実装において必要なこと

範囲内・外の区別をしながらグラフの色付けができるかどうか

• chartXSelection(value:)

• chartXSelection(range:)

struct ContentView: View {
	struct Data {
		let x: Int
		let y: Int
	}
	
	let data: [Data]
	let selectedData: [Data]

	var body: some View {
		Chart(data, id: \.x) { data in
	    BarMark(
	      x: .value("x", "\(data.x)"),
        y: .value("y", data.y),
      )
      /// 1. foregroundStyle(by:)で選択状態に応じたPlottableValueを渡す
      .foregroundStyle(
	      by: .value(
			    "status",
          selectedData.contains(data) ? "active": "inactive"
	      )
	    )
		)
		/// 2. 1で設定したPlottableValue.ValueをキーとしてColorを紐づける
		.chartForegroundStyleScale([
	    "active": Color.red,
      "inactive": Color.blue
	  ])
	}
}

不要な凡例や軸線などを消すことができるかどうか

struct ContentView: View {
	var body: some View {
		Chart {
			...
		}
		.chartXAxis(.hidden) // X軸の非表示
    .chartYAxis(.hidden) // Y軸の非表示
    .chartLegend(.hidden) // 凡例の非表示
	}
}

棒グラフの幅を設定することができるか

BarMark(
	x: .value("x", "\(data.x)"),
	y: .value("y", data.y),
	width: .ratio(0.8)
)

スライダーを実装していく

GraphRangeSliderをOSSにしてみました

/// 表示させたいデータ要素を定義する
struct Element: GraphRangeElement {
    let x: Int
    let y: Int
}

/// 選択範囲がselectedDataに格納される
/// スライダーは指定位置のみの移動
struct ContentView: View {
    let data: [Element] = [
        .init(x: 10, y: 10),
        .init(x: 20, y: 20),
        ...
    ]
    @State var selectedData = [Element]()

    var body: some View {
        GraphRangeSlider(
            data,
            id: \.x,
            selectedData: $selectedData
        )
    }
}

まとめ

令和トラベルでは一緒に働く仲間を募集しています

採用サイト | 株式会社令和トラベル

令和トラベルの採用サイトです。「あたらしい旅行を、デザインする。」というミッションのもと、テクノロジーとアイデアで、共に挑戦していく仲間を募集しています。

https://www.reiwatravel.co.jp/recruit

11月開催「NEWT Tech Talk vol.12」のお知らせ

TypeScriptによるBackend開発 ~開発効率化と運用改善のくふう~ (2024/11/28 19:30〜)

# 📍 イベント概要 NEWT Tech Talkは、技術的な知見を共有しあうことを目的とした勉強会です。前回に引き続き、弊社オフィスとオンラインのハイブリッド形式で開催します。 今月は、「TypeScriptによるBackend開発 -開発効率化と運用改善のくふう-」と題して、LT形式で発表を行います！ 令和トラベルではBackendの開発にTypeScriptを採用しており、今回は開発効率や運用に焦点を当てて取り組みを紹介します。 イベント当日は、みなさまからいただくご質問にもどんどんお答えしていきます！ また、LT会終了後はオフライン会場にて懇親会を開...

https://reiwatravel.connpass.com/event/334287/