diff --git a/MVMCoreUI.xcodeproj/project.pbxproj b/MVMCoreUI.xcodeproj/project.pbxproj index 3433e17b..12d16ced 100644 --- a/MVMCoreUI.xcodeproj/project.pbxproj +++ b/MVMCoreUI.xcodeproj/project.pbxproj @@ -153,6 +153,9 @@ 444FB7C32821B76B00DFE692 /* TitleLockupModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 444FB7C22821B76B00DFE692 /* TitleLockupModel.swift */; }; 4457904E27ECE989002B1E1E /* UIImageRenderingMode+Extension.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4457904D27ECE989002B1E1E /* UIImageRenderingMode+Extension.swift */; }; 4B002ACA2BD855EC009BC9C1 /* DateDropdownEntryFieldModel+Extension.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4B002AC92BD855EC009BC9C1 /* DateDropdownEntryFieldModel+Extension.swift */; }; + 4B3408A22C3873B0003BFABF /* CircularProgressBarModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4B3408A12C3873B0003BFABF /* CircularProgressBarModel.swift */; }; + 4B3408A42C3873E8003BFABF /* CircularProgressBar.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4B3408A32C3873E8003BFABF /* CircularProgressBar.swift */; }; + 4B53AF7B2C45BBBA00274685 /* GraphSizeProtocol.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4B53AF7A2C45BBBA00274685 /* GraphSizeProtocol.swift */; }; 522679C123FE886900906CBA /* ListLeftVariableCheckboxAllTextAndLinks.swift in Sources */ = {isa = PBXBuildFile; fileRef = 522679BF23FE886900906CBA /* ListLeftVariableCheckboxAllTextAndLinks.swift */; }; 522679C223FE886900906CBA /* ListLeftVariableCheckboxAllTextAndLinksModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 522679C023FE886900906CBA /* ListLeftVariableCheckboxAllTextAndLinksModel.swift */; }; 52267A0723FFE25000906CBA /* ListOneColumnFullWidthTextAllTextAndLinks.swift in Sources */ = {isa = PBXBuildFile; fileRef = 52267A0623FFE25000906CBA /* ListOneColumnFullWidthTextAllTextAndLinks.swift */; }; @@ -770,6 +773,9 @@ 444FB7C22821B76B00DFE692 /* TitleLockupModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TitleLockupModel.swift; sourceTree = ""; }; 4457904D27ECE989002B1E1E /* UIImageRenderingMode+Extension.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "UIImageRenderingMode+Extension.swift"; sourceTree = ""; }; 4B002AC92BD855EC009BC9C1 /* DateDropdownEntryFieldModel+Extension.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "DateDropdownEntryFieldModel+Extension.swift"; sourceTree = ""; }; + 4B3408A12C3873B0003BFABF /* CircularProgressBarModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CircularProgressBarModel.swift; sourceTree = ""; }; + 4B3408A32C3873E8003BFABF /* CircularProgressBar.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CircularProgressBar.swift; sourceTree = ""; }; + 4B53AF7A2C45BBBA00274685 /* GraphSizeProtocol.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = GraphSizeProtocol.swift; sourceTree = ""; }; 522679BF23FE886900906CBA /* ListLeftVariableCheckboxAllTextAndLinks.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = ListLeftVariableCheckboxAllTextAndLinks.swift; sourceTree = ""; }; 522679C023FE886900906CBA /* ListLeftVariableCheckboxAllTextAndLinksModel.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = ListLeftVariableCheckboxAllTextAndLinksModel.swift; sourceTree = ""; }; 52267A0623FFE25000906CBA /* ListOneColumnFullWidthTextAllTextAndLinks.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ListOneColumnFullWidthTextAllTextAndLinks.swift; sourceTree = ""; }; @@ -2309,8 +2315,11 @@ 94C2D9822386F3E30006CF46 /* Label */, 31BE15C923D8924C00452370 /* CheckboxLabelModel.swift */, 0A7BAFA2232BE63400FB8E22 /* CheckboxLabel.swift */, + 4B53AF7A2C45BBBA00274685 /* GraphSizeProtocol.swift */, D28A838223CCBD3F00DFE4FC /* WheelModel.swift */, 943784F3236B77BB006A1E82 /* Wheel.swift */, + 4B3408A12C3873B0003BFABF /* CircularProgressBarModel.swift */, + 4B3408A32C3873E8003BFABF /* CircularProgressBar.swift */, 943784F4236B77BB006A1E82 /* WheelAnimationHandler.swift */, 0AE98BB623FF18E9004C5109 /* ArrowModel.swift */, 0AE98BB423FF18D2004C5109 /* Arrow.swift */, @@ -3005,6 +3014,7 @@ D29DF2EF21ECEAE1003B2FB9 /* MFFonts.m in Sources */, D22479942316AE5E003FCCF9 /* NSLayoutConstraintExtension.swift in Sources */, D2B18B94236214AD00A9AEDC /* NavigationController.swift in Sources */, + 4B3408A42C3873E8003BFABF /* CircularProgressBar.swift in Sources */, 0A9D09222433796500D2E6C0 /* CarouselIndicator.swift in Sources */, EA17584E2BC9895A00A5C0D9 /* ButtonIcon.swift in Sources */, D29E28DA23D21AFA00ACEA85 /* StringAndMoleculeModel.swift in Sources */, @@ -3025,6 +3035,7 @@ AA1EC59924373994003D6F50 /* ListThreeColumnSpeedTestDivider.swift in Sources */, AA37CBD52519072F0027344C /* Stars.swift in Sources */, 942C378E2412F5B60066E45E /* ModalMoleculeStackTemplate.swift in Sources */, + 4B3408A22C3873B0003BFABF /* CircularProgressBarModel.swift in Sources */, 8D8067D32444473A00203BE8 /* ListRightVariablePriceChangeAllTextAndLinks.swift in Sources */, 8D4687E4242E2DF300802879 /* ListFourColumnDataUsageListItem.swift in Sources */, D2874024249BA6F300BE950A /* MVMCoreUISplitViewController+Extension.swift in Sources */, @@ -3101,6 +3112,7 @@ D2A6390522CBCE160052ED1F /* MoleculeCollectionViewCell.swift in Sources */, D2A6390122CBB1820052ED1F /* Carousel.swift in Sources */, C7F8012123E8303200396FBD /* ListRVWheel.swift in Sources */, + 4B53AF7B2C45BBBA00274685 /* GraphSizeProtocol.swift in Sources */, BB2C968F24330EA7006FF80C /* ListRightVariableTextLinkAllTextAndLinksModel.swift in Sources */, D2FB151B23A2B65B00C20E10 /* MoleculeContainer.swift in Sources */, EA7D81622B2B6E7F00D29F9E /* IconModel.swift in Sources */, diff --git a/MVMCoreUI/Atomic/Atoms/Views/CircularProgressBar.swift b/MVMCoreUI/Atomic/Atoms/Views/CircularProgressBar.swift new file mode 100644 index 00000000..f55e85c8 --- /dev/null +++ b/MVMCoreUI/Atomic/Atoms/Views/CircularProgressBar.swift @@ -0,0 +1,128 @@ +// +// CircularProgressBar.swift +// MVMCoreUI +// +// Created by Xi Zhang on 7/5/24. +// Copyright © 2024 Verizon Wireless. All rights reserved. +// + +import UIKit + +@objcMembers open class CircularProgressBar: View, MVMCoreUIViewConstrainingProtocol { + + var heightConstraint: NSLayoutConstraint? + var graphModel: CircularProgressBarModel? { + return model as? CircularProgressBarModel + } + + var viewWidth: CGFloat { + graphModel?.diameter ?? CGFloat(64) + } + + private var progressLayer = CAShapeLayer() + private var tracklayer = CAShapeLayer() + private var labelLayer = CATextLayer() + + var progressColor: UIColor = UIColor.red + var trackColor: UIColor = UIColor.lightGray + + // A path with which CAShapeLayer will be drawn on the screen + private var viewCGPath: CGPath? { + + let width = viewWidth + let height = width + + return UIBezierPath(arcCenter: CGPoint(x: width / 2.0, y: height / 2.0), + radius: (width - 1.5)/2, + startAngle: CGFloat(-0.5 * Double.pi), + endAngle: CGFloat(1.5 * Double.pi), clockwise: true).cgPath + } + +// MARK: setup + override open func setupView() { + super.setupView() + heightConstraint = heightAnchor.constraint(equalToConstant: 0) + heightConstraint?.isActive = true + widthAnchor.constraint(equalTo: heightAnchor).isActive = true + } + + override open func set(with model: MoleculeModelProtocol, _ delegateObject: MVMCoreUIDelegateObject?, _ additionalData: [AnyHashable: Any]?) { + + super.set(with: model, delegateObject, additionalData) + guard let model = model as? CircularProgressBarModel else { return } + + // set background color + backgroundColor = model.backgroundColor?.uiColor ?? UIColor.clear + + configureProgressViewToBeCircular() + + // set progress color + progressColor = model.color?.uiColor ?? .red + progressLayer.strokeColor = progressColor.cgColor + + // set track color + trackColor = model.trackColor?.uiColor ?? .lightGray + tracklayer.strokeColor = trackColor.cgColor + + // show circular progress view with animation. + showProgressWithAnimation(duration: graphModel?.duration ?? 1.0, value: Float(graphModel?.percent ?? 0) / 100) + + // show progress percentage label. + if let drawText = model.drawText, drawText { + showProgressPercentage() + } + } + + private func configureProgressViewToBeCircular() { + let lineWidth = graphModel?.lineWidth ?? 4.0 + + self.drawShape(using: tracklayer, lineWidth: lineWidth) + self.drawShape(using: progressLayer, lineWidth: lineWidth) + } + + private func drawShape(using shape: CAShapeLayer, lineWidth: CGFloat) { + shape.path = self.viewCGPath + shape.fillColor = UIColor.clear.cgColor + shape.lineWidth = lineWidth + self.layer.addSublayer(shape) + } + + // value range is [0,1] + private func showProgressWithAnimation(duration: TimeInterval, value: Float) { + let animation = CABasicAnimation(keyPath: "strokeEnd") + animation.duration = duration + + animation.fromValue = 0 //start animation at point 0 + animation.toValue = value //end animation at point specified + animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.linear) + progressLayer.strokeEnd = CGFloat(value) + progressLayer.add(animation, forKey: "animateCircle") + } + + private func showProgressPercentage() { + + let percent = graphModel?.percent ?? 0 + let percentLen = percent > 9 ? 2 : 1 + + // configure attributed string for progress percentage. + let attributedString = NSMutableAttributedString(string: String(percent) + "%") + // percent value + attributedString.setAttributes([NSAttributedString.Key.font: MFStyler.fontBoldTitleLarge()], range: NSMakeRange(0, percentLen)) + // % symbol + attributedString.setAttributes([NSAttributedString.Key.font: MFStyler.fontBoldBodyLarge()], range: NSMakeRange(percentLen, 1)) + + // show progress percentage in a text layer + let width = viewWidth + let height = width + labelLayer.string = attributedString + labelLayer.frame = CGRectMake((width - CGFloat(percentLen * 20))/2, (height - 30)/2, 60, 30) + self.layer.addSublayer(labelLayer) + } + + +//MARK: MVMCoreUIViewConstrainingProtocol + public func needsToBeConstrained() -> Bool { + return true + } +} + diff --git a/MVMCoreUI/Atomic/Atoms/Views/CircularProgressBarModel.swift b/MVMCoreUI/Atomic/Atoms/Views/CircularProgressBarModel.swift new file mode 100644 index 00000000..61c503f6 --- /dev/null +++ b/MVMCoreUI/Atomic/Atoms/Views/CircularProgressBarModel.swift @@ -0,0 +1,119 @@ +// +// CircularProgressBarModel.swift +// MVMCoreUI +// +// https://oneconfluence.verizon.com/display/MFD/Circular+Progress+Tracker +// +// Created by Xi Zhang on 7/5/24. +// Copyright © 2024 Verizon Wireless. All rights reserved. +// + +import Foundation + +public class CircularProgressBarModel: GraphSizeBase, MoleculeModelProtocol { + + public static var identifier: String = "circularProgress" + public var id: String = UUID().uuidString + + public var percent: Int = 0 + public var diameter: CGFloat? = 64 + public var lineWidth: CGFloat? = 4 + public var duration : Double? = 1.0 + public var color: Color? = Color(uiColor: UIColor.mfGet(forHex: "#007AB8")) + public var trackColor: Color? = Color(uiColor: .mvmCoolGray3) + public var drawText: Bool? = true + public var backgroundColor: Color? = Color(uiColor: UIColor.clear) + + public override init() { + super.init() + updateSize() + } + + private enum CodingKeys: String, CodingKey { + case id + case moleculeName + case percent + case size + case diameter + case lineWidth + case duration + case color + case trackColor + case drawText + case backgroundColor + } + + required public init(from decoder: Decoder) throws { + + super.init() + let typeContainer = try decoder.container(keyedBy: CodingKeys.self) + id = try typeContainer.decodeIfPresent(String.self, forKey: .id) ?? UUID().uuidString + + percent = try typeContainer.decode(Int.self, forKey: .percent) + + if let size = try typeContainer.decodeIfPresent(GraphSize.self, forKey: .size) { + self.size = size + } + updateSize() + + if let diameter = try typeContainer.decodeIfPresent(CGFloat.self, forKey: .diameter) { + self.diameter = diameter + } + + if let lineWidth = try typeContainer.decodeIfPresent(CGFloat.self, forKey: .lineWidth) { + self.lineWidth = lineWidth + } + + if let duration = try typeContainer.decodeIfPresent(Double.self, forKey: .duration) { + self.duration = duration + } + + if let drawText = try typeContainer.decodeIfPresent(Bool.self, forKey: .drawText) { + self.drawText = drawText + } + + if let color = try typeContainer.decodeIfPresent(Color.self, forKey: .color) { + self.color = color + } + + if let trackColor = try typeContainer.decodeIfPresent(Color.self, forKey: .trackColor) { + self.trackColor = trackColor + } + + if let backgroundColor = try typeContainer.decodeIfPresent(Color.self, forKey: .backgroundColor) { + self.backgroundColor = backgroundColor + } + } + + public func encode(to encoder: Encoder) throws { + var container = encoder.container(keyedBy: CodingKeys.self) + try container.encode(id, forKey: .id) + try container.encode(moleculeName, forKey: .moleculeName) + try container.encode(percent, forKey: .percent) + try container.encodeIfPresent(size, forKey: .size) + try container.encodeIfPresent(diameter, forKey: .diameter) + try container.encodeIfPresent(lineWidth, forKey: .lineWidth) + try container.encodeIfPresent(duration, forKey: .duration) + try container.encodeIfPresent(drawText, forKey: .drawText) + try container.encodeIfPresent(trackColor, forKey: .trackColor) + try container.encodeIfPresent(color, forKey: .color) + try container.encodeIfPresent(backgroundColor, forKey: .backgroundColor) + } + + public override func updateSize() { + switch size { + case .small: + diameter = MFSizeObject(standardSize: 64)?.getValueBasedOnApplicationWidth() ?? 64 + lineWidth = MFSizeObject(standardSize: 4)?.getValueBasedOnApplicationWidth() ?? 4 + break + case .medium: + diameter = MFSizeObject(standardSize: 84)?.getValueBasedOnApplicationWidth() ?? 84 + lineWidth = MFSizeObject(standardSize: 4)?.getValueBasedOnApplicationWidth() ?? 4 + break + case .large: + diameter = MFSizeObject(standardSize: 124)?.getValueBasedOnApplicationWidth() ?? 124 + lineWidth = MFSizeObject(standardSize: 4)?.getValueBasedOnApplicationWidth() ?? 4 + break + } + } +} diff --git a/MVMCoreUI/Atomic/Atoms/Views/GraphSizeProtocol.swift b/MVMCoreUI/Atomic/Atoms/Views/GraphSizeProtocol.swift new file mode 100644 index 00000000..13000706 --- /dev/null +++ b/MVMCoreUI/Atomic/Atoms/Views/GraphSizeProtocol.swift @@ -0,0 +1,29 @@ +// +// GraphSizeProtocol.swift +// MVMCoreUI +// +// Created by Xi Zhang on 7/15/24. +// Copyright © 2024 Verizon Wireless. All rights reserved. +// + +import Foundation + +public enum GraphSize: String, Codable { + case small, medium, large +} + +public protocol GraphSizeProtocol { + var size: GraphSize { get set } + func updateSize() +} + +public class GraphSizeBase: GraphSizeProtocol { + public var size: GraphSize = .small { + didSet { + updateSize() + } + } + + public func updateSize() { + } +} diff --git a/MVMCoreUI/Atomic/Atoms/Views/WheelModel.swift b/MVMCoreUI/Atomic/Atoms/Views/WheelModel.swift index 4fed14cb..416a1ac2 100644 --- a/MVMCoreUI/Atomic/Atoms/Views/WheelModel.swift +++ b/MVMCoreUI/Atomic/Atoms/Views/WheelModel.swift @@ -8,15 +8,11 @@ import UIKit -public enum GraphSize: String, Codable { - case small, medium, large -} - public enum GraphStyle: String, Codable { case unlimited, safetyMode } -public class WheelModel: MoleculeModelProtocol { +public class WheelModel: GraphSizeBase, MoleculeModelProtocol { public static var identifier: String = "wheel" public var id: String = UUID().uuidString @@ -27,11 +23,6 @@ public class WheelModel: MoleculeModelProtocol { } } - public var size: GraphSize = .small { - didSet { - updateSize() - } - } public var diameter: CGFloat = 24 public var lineWidth: CGFloat = 5 public var clockwise: Bool = true @@ -39,7 +30,8 @@ public class WheelModel: MoleculeModelProtocol { public var colors = [Color]() public var backgroundColor: Color? - public init() { + public override init() { + super.init() updateStyle() updateSize() } @@ -58,6 +50,7 @@ public class WheelModel: MoleculeModelProtocol { } required public init(from decoder: Decoder) throws { + super.init() let typeContainer = try decoder.container(keyedBy: CodingKeys.self) id = try typeContainer.decodeIfPresent(String.self, forKey: .id) ?? UUID().uuidString @@ -123,7 +116,7 @@ public class WheelModel: MoleculeModelProtocol { } } - func updateSize() { + public override func updateSize() { switch size { case .small: diameter = MFSizeObject(standardSize: 20)?.getValueBasedOnApplicationWidth() ?? 20 diff --git a/MVMCoreUI/OtherHandlers/CoreUIModelMapping.swift b/MVMCoreUI/OtherHandlers/CoreUIModelMapping.swift index 22f65ade..d310a126 100644 --- a/MVMCoreUI/OtherHandlers/CoreUIModelMapping.swift +++ b/MVMCoreUI/OtherHandlers/CoreUIModelMapping.swift @@ -67,6 +67,7 @@ open class CoreUIModelMapping: ModelMapping { ModelRegistry.register(handler: LoadImageView.self, for: ImageViewModel.self) ModelRegistry.register(handler: Line.self, for: LineModel.self) ModelRegistry.register(handler: Wheel.self, for: WheelModel.self) + ModelRegistry.register(handler: CircularProgressBar.self, for: CircularProgressBarModel.self) ModelRegistry.register(handler: Toggle.self, for: ToggleModel.self) ModelRegistry.register(handler: CheckboxLabel.self, for: CheckboxLabelModel.self) ModelRegistry.register(handler: Arrow.self, for: ArrowModel.self)