Lab 070 – Step Into Vision 2025

Part of my goal to publish on Step Into Vision everyday in 2025.

Just a bit of fun to visualize the days that I’ve published this year. Today makes 200 days in a row that I’ve posted something on the site.

I may try to turn this into a widget at some point. It could also be fun to explore some spatial layouts that track progress through a year.

Lab Code

struct Lab070: View {

    @State var dayOfYear: Int = 0

    func getDateForDayOfYear(_ day: Int) -> String {
        let calendar = Calendar.current
        let currentYear = calendar.component(.year, from: Date())
        if let date = calendar.date(from: DateComponents(year: currentYear, day: day)) {
            let formatter = DateFormatter()
            formatter.dateFormat = "MMM dd yyyy"
            return "Day \(day): " + formatter.string(from: date)
        }
        return "Day \(day)"
    }

    var body: some View {
        VStackLayout().depthAlignment(.center) {

            LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: 4), count: 20), spacing: 4) {
                ForEach(1...365, id: \.self) { day in
                    Circle()
                        .fill(day <= dayOfYear ? .stepGreen : .stepBackgroundSecondary)
                        .hoverEffect()
                        .help(getDateForDayOfYear(day))
                        .frame(width: 30, height: 30)
                }
            }
            .padding()
        }
        .ornament(attachmentAnchor: .scene(.topBack), ornament: {
            Text("Step Into Vision: 2025")
                .font(.largeTitle)
                .padding()
                .glassBackgroundEffect()
        })
        .ornament(attachmentAnchor: .scene(.bottom), ornament: {
            VStack {
                Text("Day of Year: \(dayOfYear)")
                Text("2025 is \(Int((Double(dayOfYear) / 365.0) * 100))% complete")
            }
            .padding()
            .glassBackgroundEffect()
        })
        .onAppear {
            let calendar = Calendar.current
            let today = Date()
            dayOfYear = calendar.ordinality(of: .day, in: .year, for: today) ?? 0
        }
    }
}

Support our work so we can continue to bring you new examples and articles.

Questions or feedback?