SwiftUI Practice – MonthlyHeatMap

Custom heat map view built with SwiftUI utilizing a Grid to dynamically build the heat map for the desired month.

Customizations

• HeatMapItem color

Use in your code

HeatMapView(date: Date(), heatMapItems: heatMapItems)

HeatMapView

struct HeatMapView: View {
  let columns = [GridItem(.adaptive(minimum: 28))]
  var color: Color = Color(red: 60 / 255, green: 238 / 255, blue: 73 / 255)
  var date = Date()
  var heatMapItems: [HeatMapItem]
  
  var title: String {
    let dateFormatter = DateFormatter()
    dateFormatter.dateFormat = "MMMM yyyy"
    return dateFormatter.string(from: date)
  }
  
  var body: some View {
    VStack(alignment: .leading) {
      Text(title)
      LazyVGrid(columns: columns, spacing: 5) {
        ForEach(heatMapItems) { item in
          HeatMapItemView(heatMapItem: item, color: color)
        }
      }
    }
  }
}

HeatMapItem

struct HeatMapItem: Identifiable {
  let id: UUID = UUID()
  let date: Date
  let weight: Double
}

HeatMapItemView

struct HeatMapItemView: View {
  var heatMapItem: HeatMapItem
  var color: Color = .gray
  var active: Bool {
    heatMapItem.weight > 0.25 ? true : false
  }
  
  var body: some View {
    ZStack {
      RoundedRectangle(cornerRadius: 5)
        .fill(active ? color.opacity(heatMapItem.weight) : .secondary.opacity(0.5))
        .frame(width: 33, height: 23)
    }
  }
}

You can download the code for this project on GitHub