Skip to content

Commit

Permalink
Added all possible gauges implementations
Browse files Browse the repository at this point in the history
  • Loading branch information
VerticalHeretic committed Aug 27, 2022
1 parent e87dcd8 commit 6a8fe14
Show file tree
Hide file tree
Showing 4 changed files with 190 additions and 26 deletions.
4 changes: 4 additions & 0 deletions iOS16-SwiftUI-Showdown.xcodeproj/project.pbxproj
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
A072717E28BA4B1400D354DC /* Preview Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = A072717D28BA4B1400D354DC /* Preview Assets.xcassets */; };
A072718628BA768900D354DC /* ChartsScreen.swift in Sources */ = {isa = PBXBuildFile; fileRef = A072718528BA768900D354DC /* ChartsScreen.swift */; };
A072718828BA779C00D354DC /* FeatureCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = A072718728BA779C00D354DC /* FeatureCell.swift */; };
A072718A28BA8CAA00D354DC /* GaugeScreen.swift in Sources */ = {isa = PBXBuildFile; fileRef = A072718928BA8CAA00D354DC /* GaugeScreen.swift */; };
/* End PBXBuildFile section */

/* Begin PBXFileReference section */
Expand All @@ -24,6 +25,7 @@
A072717D28BA4B1400D354DC /* Preview Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = "Preview Assets.xcassets"; sourceTree = "<group>"; };
A072718528BA768900D354DC /* ChartsScreen.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ChartsScreen.swift; sourceTree = "<group>"; };
A072718728BA779C00D354DC /* FeatureCell.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FeatureCell.swift; sourceTree = "<group>"; };
A072718928BA8CAA00D354DC /* GaugeScreen.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = GaugeScreen.swift; sourceTree = "<group>"; };
/* End PBXFileReference section */

/* Begin PBXFrameworksBuildPhase section */
Expand Down Expand Up @@ -58,6 +60,7 @@
children = (
A072717528BA4B1300D354DC /* iOS16_SwiftUI_ShowdownApp.swift */,
A072718528BA768900D354DC /* ChartsScreen.swift */,
A072718928BA8CAA00D354DC /* GaugeScreen.swift */,
A072717728BA4B1300D354DC /* ContentView.swift */,
A072717928BA4B1400D354DC /* Assets.xcassets */,
A072717B28BA4B1400D354DC /* iOS16_SwiftUI_Showdown.entitlements */,
Expand Down Expand Up @@ -148,6 +151,7 @@
A072718828BA779C00D354DC /* FeatureCell.swift in Sources */,
A072718628BA768900D354DC /* ChartsScreen.swift in Sources */,
A072717828BA4B1300D354DC /* ContentView.swift in Sources */,
A072718A28BA8CAA00D354DC /* GaugeScreen.swift in Sources */,
A072717628BA4B1300D354DC /* iOS16_SwiftUI_ShowdownApp.swift in Sources */,
);
runOnlyForDeploymentPostprocessing = 0;
Expand Down
113 changes: 88 additions & 25 deletions iOS16-SwiftUI-Showdown/ChartsScreen.swift
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,14 @@ struct Developer: Identifiable {
let seniority: Double
}

struct ChartsScreen: View {
var feature: Feature

@State var team: [Developer] = [
struct Score: Identifiable {
let id: UUID = UUID()
let date: Date
let value: Double
}

final class ChartsViewModel: ObservableObject {
@Published var team: [Developer] = [
Developer(name: "Łukasz", seniority: 2.5),
Developer(name: "Wiktor", seniority: 3.5),
Developer(name: "Maciek", seniority: 6),
Expand All @@ -37,9 +41,32 @@ struct ChartsScreen: View {
Developer(name: "Miłosz", seniority: 6.3),
Developer(name: "Rafał", seniority: 6.7),
Developer(name: "Tomek", seniority: 6.9),
Developer(name: "Robert", seniority: 6.0)
Developer(name: "Robert", seniority: 6.0),
Developer(name: "Kacper", seniority: 1)
]

@Published var scoresA: [Score] = [
Score(date: Calendar.current.date(byAdding: .day, value: 0, to: Date())!, value: 21),
Score(date: Calendar.current.date(byAdding: .day, value: 1, to: Date())!, value: 37),
Score(date: Calendar.current.date(byAdding: .day, value: 2, to: Date())!, value: 69),
Score(date: Calendar.current.date(byAdding: .day, value: 3, to: Date())!, value: 211),
Score(date: Calendar.current.date(byAdding: .day, value: 4, to: Date())!, value: 2137)
]

@Published var scoresB: [Score] = [
Score(date: Calendar.current.date(byAdding: .day, value: 0, to: Date())!, value: 21),
Score(date: Calendar.current.date(byAdding: .day, value: 2, to: Date())!, value: 1111),
Score(date: Calendar.current.date(byAdding: .day, value: 4, to: Date())!, value: 233),
Score(date: Calendar.current.date(byAdding: .day, value: 5, to: Date())!, value: 2111),
Score(date: Calendar.current.date(byAdding: .day, value: 8, to: Date())!, value: 444)
]
}

// A lot about charts can be found in documentation, for samples search for keyword `Mark`
struct ChartsScreen: View {
var feature: Feature
@StateObject var viewModel = ChartsViewModel()

var body: some View {
VStack {
Text(feature.description)
Expand All @@ -48,28 +75,10 @@ struct ChartsScreen: View {
.multilineTextAlignment(.center)
Spacer()

ScrollView {
barChart

}
}
.navigationTitle(feature.title)
.navigationBarTitleDisplayMode(.inline)
}

var barChart: some View {
VStack {
Chart(team) {
BarMark(x: .value("Developer Name", $0.name),
y: .value("Developer Seniority", $0.seniority))
.foregroundStyle(.orange.gradient)
}
.frame(height: 400)

HStack {
Button {
withAnimation {
team = team.sorted { $0.seniority < $1.seniority }
viewModel.team = viewModel.team.sorted { $0.seniority < $1.seniority }
}
} label: {
Text("Sort")
Expand All @@ -81,7 +90,7 @@ struct ChartsScreen: View {

Button {
withAnimation {
team = team.shuffled()
viewModel.team = viewModel.team.shuffled()
}
} label: {
Text("Shuffle")
Expand All @@ -91,7 +100,61 @@ struct ChartsScreen: View {
.cornerRadius(10)
}
}

ScrollView {
barChart
lineChart
areaChart
}
}
.navigationTitle(feature.title)
.navigationBarTitleDisplayMode(.inline)
}

var lineChart: some View {
Chart {
ForEach(viewModel.scoresA) {
LineMark(x: .value("Date", $0.date),
y: .value("Score", $0.value))
.foregroundStyle(.orange)
.interpolationMethod(.stepStart)
}
// This is not working as in documentation :/
// ForEach(viewModel.scoresB) {
// LineMark(x: .value("Date", $0.date),
// y: .value("Score B", $0.value))
// .foregroundStyle(.red)
// }

RuleMark(
y: .value("Mid Threshold", 1000)
)
.foregroundStyle(.green)

RuleMark(
y: .value("Pro Threshold", 2000)
)
.foregroundStyle(.yellow)
}
.frame(height: 400)
}

var barChart: some View {
Chart(viewModel.team) {
BarMark(x: .value("Developer Name", $0.name),
y: .value("Developer Seniority", $0.seniority))
.foregroundStyle(.orange.gradient)
}
.frame(height: 400)
}

var areaChart: some View {
Chart(viewModel.scoresA) {
AreaMark(x: .value("Date", $0.date),
y: .value("Score", $0.value))
.foregroundStyle(.green.gradient)
}
.frame(height: 400)
}
}

Expand Down
2 changes: 1 addition & 1 deletion iOS16-SwiftUI-Showdown/ContentView.swift
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ struct ContentView: View {
case .charts:
ChartsScreen(feature: feature)
case .gauge:
Text(feature.title)
GaugeScreen(feature: feature)
}
}
.navigationTitle("iOS16 Features 🚀")
Expand Down
97 changes: 97 additions & 0 deletions iOS16-SwiftUI-Showdown/GaugeScreen.swift
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
//
// GaugeScreen.swift
// iOS16-SwiftUI-Showdown
//
// Created by Łukasz Stachnik on 27/08/2022.
//

import SwiftUI

struct GaugeScreen: View {
var feature: Feature
@State private var progress = 0.0
let timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect()

var body: some View {
VStack {
Text(feature.description)
.font(.footnote)
.padding()
.multilineTextAlignment(.center)


Gauge(value: progress) {
Text("Task progress")
.font(.title)
} currentValueLabel: {
Text(progress.formatted(.percent))
.font(.footnote)
} minimumValueLabel: {
Text(0.formatted(.percent))
.font(.footnote)
} maximumValueLabel: {
Text(100.formatted(.percent))
.font(.footnote)
}
.padding()


Gauge(value: progress) {
Text("Status")
.font(.footnote)
} currentValueLabel: {
Text(progress.formatted(.percent))
.font(.footnote)
}
.padding()
.gaugeStyle(.accessoryCircularCapacity)
.tint(.orange)


Gauge(value: progress) {
Text("Status")
.font(.footnote)
} currentValueLabel: {
Text(progress.formatted(.percent))
.font(.footnote)
}
.scaleEffect(2.0) // To make the circular ones bigger you need to use scaleEffect and for the linear frame will be sufficient
.padding()
.gaugeStyle(.accessoryCircular)
.tint(.indigo)

Gauge(value: progress) {
Text("Status")
.font(.footnote)
} currentValueLabel: {
Text(progress.formatted(.percent))
.font(.footnote)
}
.padding()
.gaugeStyle(.accessoryLinearCapacity)
.tint(.pink)

Spacer()

}
.onReceive(timer) { _ in
if progress < 1.0 {
withAnimation {
progress += 0.025
}
}
}


.navigationTitle(feature.title)
.navigationBarTitleDisplayMode(.inline)
}
}

struct GaugeScreen_Previews: PreviewProvider {
static var previews: some View {
GaugeScreen(feature: Feature(title: "Gauge 🔜",
description: "SwiftUI introduces a new view called Gauge for displaying progress. In the most basic form, a gauge has a default range from 0 to 1.",
type: .gauge))
}
}

0 comments on commit 6a8fe14

Please sign in to comment.