AirQuality UI

1Weather/Model/ModelObjects/Health/Health.swift

@@ -17,6 +17,11 @@ public struct Health: Equatable, Hashable {
 public struct AirQuality: Equatable, Hashable {
 public struct AirQuality: Equatable, Hashable {
     public let index: Double
     public let index: Double
     public let advice: String //TODO: support for localization
     public let advice: String //TODO: support for localization
+    public var progress:CGFloat {
+        var progressValue = max(0, CGFloat(index / 500))
+        progressValue = min(1, progressValue)
+        return progressValue
+    }
     public var status: HealthStatus {
     public var status: HealthStatus {
         get {
         get {
             HealthStatus(value: index)
             HealthStatus(value: index)
@@ -73,6 +78,11 @@ public enum HealthStatus: String {
 public struct Pollutant: Equatable, Hashable {
 public struct Pollutant: Equatable, Hashable {
     public let name: String
     public let name: String
     public let value: Double
     public let value: Double
+    public var progress:CGFloat {
+        var progressValue = max(0, CGFloat(value / 500))
+        progressValue = min(1, progressValue)
+        return progressValue
+    }
     public var status: HealthStatus {
     public var status: HealthStatus {
         get {
         get {
             HealthStatus(value: value)
             HealthStatus(value: value)

1Weather/UI/View controllers/Today/Cells/TodayAirQualityCell/PollutantView.swift

@@ -14,6 +14,7 @@ class PollutantView: UIView {
     private let statusLabel = UILabel()
     private let statusLabel = UILabel()
     private let progressContainer = UIView()
     private let progressContainer = UIView()
     private let progressGradient = CAGradientLayer()
     private let progressGradient = CAGradientLayer()
+    private var progressValue:CGFloat = 0
     
     
     init() {
     init() {
         super.init(frame: .zero)
         super.init(frame: .zero)
@@ -32,10 +33,18 @@ class PollutantView: UIView {
         updateUI()
         updateUI()
     }
     }
     
     
+    override func layoutSubviews() {
+        super.layoutSubviews()
+        progressGradient.frame = .init(x: 0, y: 0, width: progressContainer.bounds.width * progressValue, height: progressContainer.bounds.height)
+    }
+    
     func configure(pollutant: Pollutant) {
     func configure(pollutant: Pollutant) {
         typeLabel.text = pollutant.name.localized
         typeLabel.text = pollutant.name.localized
         valueLabel.text = "\(Int(pollutant.value))"
         valueLabel.text = "\(Int(pollutant.value))"
         statusLabel.text = pollutant.status.localized
         statusLabel.text = pollutant.status.localized
+        progressValue = pollutant.progress
+        progressGradient.colors = [pollutant.status.gradientColorStart.cgColor,
+                                   pollutant.status.gradientColorEnd.cgColor]
     }
     }
     
     
     private func updateUI() {
     private func updateUI() {
@@ -82,6 +91,7 @@ private extension PollutantView {
     }
     }
     
     
     func prepareProgress() {
     func prepareProgress() {
+        progressContainer.clipsToBounds = true
         progressContainer.layer.cornerRadius = 2
         progressContainer.layer.cornerRadius = 2
         progressContainer.backgroundColor = UIColor(hex: 0xe9ebfc)
         progressContainer.backgroundColor = UIColor(hex: 0xe9ebfc)
         addSubview(progressContainer)
         addSubview(progressContainer)
@@ -98,5 +108,11 @@ private extension PollutantView {
             make.centerY.equalTo(typeLabel)
             make.centerY.equalTo(typeLabel)
             make.width.equalTo(progressContainer).multipliedBy(0.4)
             make.width.equalTo(progressContainer).multipliedBy(0.4)
         }
         }
+        
+        //Gradient
+        progressGradient.startPoint = .init(x: 0, y: 0.5)
+        progressGradient.endPoint = .init(x: 1, y: 0.5)
+        progressGradient.cornerRadius = 2
+        progressContainer.layer.addSublayer(progressGradient)
     }
     }
 }
 }

1Weather/UI/View controllers/Today/Cells/TodayAirQualityCell/TodayAirQualityCell.swift

@@ -6,10 +6,17 @@
 //
 //
 
 
 import UIKit
 import UIKit
+import Cirque
+
+private struct AirQualityDataType: CirqueDataType {
+    var color: UIColor
+    var value: Double
+}
 
 
 class TodayAirQualityCell: UITableViewCell {
 class TodayAirQualityCell: UITableViewCell {
     //Private
     //Private
     private let headingLabel = UILabel()
     private let headingLabel = UILabel()
+    private let cirqueView = CirqueView()
     private let valueCircle = CAShapeLayer()
     private let valueCircle = CAShapeLayer()
     private let airQualityValueLabel = UILabel()
     private let airQualityValueLabel = UILabel()
     private let airQualityLabel = UILabel()
     private let airQualityLabel = UILabel()
@@ -41,6 +48,7 @@ class TodayAirQualityCell: UITableViewCell {
     }
     }
     
     
     public func configure(health: Health) {
     public func configure(health: Health) {
+        //Air quality label
         airQualityValueLabel.text = "\(Int(health.airQuality?.index ?? 0))"
         airQualityValueLabel.text = "\(Int(health.airQuality?.index ?? 0))"
         let aqiText = "air.quality.is".localized()
         let aqiText = "air.quality.is".localized()
         let aqiConditionText = health.airQuality?.status.localized ?? ""
         let aqiConditionText = health.airQuality?.status.localized ?? ""
@@ -60,6 +68,11 @@ class TodayAirQualityCell: UITableViewCell {
             stackView.addArrangedSubview(pollutionView)
             stackView.addArrangedSubview(pollutionView)
         }
         }
         stackView.layoutIfNeeded()
         stackView.layoutIfNeeded()
+        
+        //Progress
+        cirqueView.dataPoints = [AirQualityDataType(color: .red, value: 0.3),
+                                 AirQualityDataType(color: .blue, value: 0.2),
+                                 AirQualityDataType(color: .yellow, value: 0.2)]
     }
     }
 }
 }
 
 
@@ -124,6 +137,16 @@ private extension TodayAirQualityCell {
         valueCircle.fillColor = UIColor.clear.cgColor
         valueCircle.fillColor = UIColor.clear.cgColor
         valueCircle.lineWidth = 2
         valueCircle.lineWidth = 2
         contentView.layer.addSublayer(valueCircle)
         contentView.layer.addSublayer(valueCircle)
+
+//        cirqueView.lineWidth = 4
+//        cirqueView.backgroundColor = .clear
+//        contentView.addSubview(cirqueView)
+//
+//        cirqueView.snp.makeConstraints { (make) in
+//            make.width.height.equalTo(72)
+//            make.top.equalTo(headingLabel.snp.bottom).offset(48)
+//            make.left.equalToSuperview().inset(20)
+//        }
     }
     }
     
     
     func prepareStackView() {
     func prepareStackView() {