Bir Dakikada Chart Oluşturma

WWDC 2022 ses getiren en büyük eklentilerinden biri Chart Frameworks Apple tarafından inanılmaz grafikler oluşturmamızı sağlayan kütüphanedir.

“Bir resim bin sözcüğe bedeldir” cümlesinden anlayacağımız gibi bizim için neyin önemli neyin önemli olmadığını anlamak görseller, analizi daha kolay ve hızlı hale getirir.

Adım adım size nasıl kullanılmaya başlayacağınızı göstereceğim. Kendiniz uygulamak isterseniz MacOS Monterey 12.4, Xcode 14 ve iOS 16 minimum versiyona sahip olmanız gerekli.

Bu makalede veriyi görselleştirmek için Bar, Point, Line Marks üzerinden anlatılacaktır.

Çiçek satıyorsunuz gün sonunda hangi çiçekten ne kadar sattığınızı görmek istiyorsunuz.

Grafik eklemek istediğiniz dosyanın en üstüne import Charts kütüphanesini ekleyelim. Tasarımda eklemek istediğiniz yere Chart view oluşturun. Görselleştirmek içinde BarMark view ekleyin.

Flowers Struct oluşturduk name, sales ve id property bulunmakta. id eklememizin nedeni her modelin unique olması gerekliliğidir. Satırları tek tek eklemek yerine sales listesi oluşturduk bu sayede sales sayısı kadar BarMark oluşturulacaktır. BarMark bizden x ve y değerlerini .value olarak ekledik.

Yukarıda gördüğünüz gibi grafik oluştu. Dikey gösterim istersek x ve y deki .value yer değiştirmemiz yeterli olacaktır.

Ankara ve İstanbul ‘daki şubenizde haftalık hangi üründen ne kadar satılmış karşılaştırmak istediğinizde her iki şehrin veri setini oluşturalım. Oluşturduğumuz veri setlerini Series modeli ile liste haline getirelim.

50. Satırda grafik gösterimini sırası ile BarMark — PointMark — LineMark kullandığımızda görseller ektedir.

54.Satırda .foregroundStyle şehir adını sol alta ekleyebiliriz. Her satır veya sütun için .foregroundStyle(by: .value(“Shape Color”, Color.blue)) şeklinde renklendirme yapabiliriz.

55.Satırda .interpolationMethod(.catmullRom) LineMark ile kullandığımızda kırık çizgileri ovalleştiririz.

Chart(seriesData) { series in   ForEach(series.sales) { element in     LineMark(       x: .value(“Day”, element.weekday),       y: .value(“Sales”, element.sales)      )       .foregroundStyle(by: .value(“City”, series.city))      .symbol(by: .value(“City”, series.city))  }}.padding()

Hangi gün kaç ürün satıldığını yatay ve dikey eksendeki kesişimindeki yuvarlay noktayı .symbol gösterir.

İstanbul ve Ankara veri setini tek Chart üzerinden göstermek yerine. Segmented Picker kullarak data oluşturarak binding gerçekleştirdik. Bu sayede her tıklamada veri seti data değişecek grafik güncellenecektir.

BarMark, LineMark, RuleMark bir arada kullanarak Chart üzerinde gösterimi.

Bonus örneğimizde diğer örneklerde Chart view sales listesini ekleyerek gösterimini sağlamıştık. Birden fazla mark kullanmayı öğreneceğiz. Bu örnekte Chart içine ForEach kullanarak gösterimini gerçekleştirdik.

Sırayla anlatacak olursak 27. satırda BarMark ekledik her sütunun rengini listedeki color’dan belirledik çizgi kalınlıgını .lineStyle belirledik. Her sütünun başındaki yazı için .annotation kullandık.

37. satırda LineMark kullandık BarMark’dan farklı olarak .interpolation kullandık grafiği oval olmasını sağladık.

45. satırda RuleMark kullandık eşik değeri belirledik ve rengini kırmızı yaptık. Satışı 40'dan az ve fazla olan ürünleri ayırt edebiliyoruz.

Chartımızı tamamladığımıza göre görünümünü düzenleyelim. .chartForegroundStyleScale ile veri setimizdeki her ürünün rengini ve yazısını belirleyebiliyoruz. .chartYScale ile dikey eksende değeri 0 ie 150 arası olarak belirledik. .chartPlatStyle ile arka plan rengini ve çerçeve rengini belirlemiş olduk. .chartXAxis grafiğin x eksenindeki yazıları gizlemiş olduk.

Ayrıca Charts kütüphanesi dark mode, çoklu platform desteği, dil desteği, yüksek kontrast, ses grafikleri ve voice over desteği sağlamaktadır.

Görselde oluşturabileceğimiz grafikler gösterilmiştir. İhtiyacımız doğrultusunda özelleştirerek Mark’ları kullanabiliriz. Alttaki github linkinden örnekleri inceleyebilirsiniz.

Referans aldığım kaynaklar.