diff --git a/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsHubViewModel.swift b/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsHubViewModel.swift index d213847138e..a31ec5c6198 100644 --- a/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsHubViewModel.swift +++ b/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsHubViewModel.swift @@ -197,13 +197,17 @@ private extension AnalyticsHubViewModel { leadingValue: StatsDataTextFormatter.createTotalRevenueText(orderStats: currentPeriodStats, selectedIntervalIndex: nil), leadingDelta: totalDelta.string, - leadingDeltaColor: Constants.deltaColor(for: totalDelta.direction), + leadingDeltaColor: totalDelta.direction.deltaBackgroundColor, + leadingDeltaTextColor: totalDelta.direction.deltaTextColor, leadingChartData: StatsIntervalDataParser.getChartData(for: .totalRevenue, from: currentPeriodStats), + leadingChartColor: totalDelta.direction.chartColor, trailingTitle: Localization.RevenueCard.trailingTitle, trailingValue: StatsDataTextFormatter.createNetRevenueText(orderStats: currentPeriodStats), trailingDelta: netDelta.string, - trailingDeltaColor: Constants.deltaColor(for: netDelta.direction), + trailingDeltaColor: netDelta.direction.deltaBackgroundColor, + trailingDeltaTextColor: netDelta.direction.deltaTextColor, trailingChartData: StatsIntervalDataParser.getChartData(for: .netRevenue, from: currentPeriodStats), + trailingChartColor: netDelta.direction.chartColor, isRedacted: false, showSyncError: showSyncError, syncErrorMessage: Localization.RevenueCard.noRevenue) @@ -219,13 +223,17 @@ private extension AnalyticsHubViewModel { leadingValue: StatsDataTextFormatter.createOrderCountText(orderStats: currentPeriodStats, selectedIntervalIndex: nil), leadingDelta: ordersCountDelta.string, - leadingDeltaColor: Constants.deltaColor(for: ordersCountDelta.direction), + leadingDeltaColor: ordersCountDelta.direction.deltaBackgroundColor, + leadingDeltaTextColor: ordersCountDelta.direction.deltaTextColor, leadingChartData: StatsIntervalDataParser.getChartData(for: .orderCount, from: currentPeriodStats), + leadingChartColor: ordersCountDelta.direction.chartColor, trailingTitle: Localization.OrderCard.trailingTitle, trailingValue: StatsDataTextFormatter.createAverageOrderValueText(orderStats: currentPeriodStats), trailingDelta: orderValueDelta.string, - trailingDeltaColor: Constants.deltaColor(for: orderValueDelta.direction), + trailingDeltaColor: orderValueDelta.direction.deltaBackgroundColor, + trailingDeltaTextColor: orderValueDelta.direction.deltaTextColor, trailingChartData: StatsIntervalDataParser.getChartData(for: .averageOrderValue, from: currentPeriodStats), + trailingChartColor: orderValueDelta.direction.chartColor, isRedacted: false, showSyncError: showSyncError, syncErrorMessage: Localization.OrderCard.noOrders) @@ -243,7 +251,8 @@ private extension AnalyticsHubViewModel { return AnalyticsProductCardViewModel(itemsSold: itemsSold, delta: itemsSoldDelta.string, - deltaBackgroundColor: Constants.deltaColor(for: itemsSoldDelta.direction), + deltaBackgroundColor: itemsSoldDelta.direction.deltaBackgroundColor, + deltaTextColor: itemsSoldDelta.direction.deltaTextColor, itemsSoldData: itemSoldRows(from: itemsSoldStats), isRedacted: false, showStatsError: showStatsError, @@ -276,15 +285,6 @@ private extension AnalyticsHubViewModel { private extension AnalyticsHubViewModel { enum Constants { static let maxNumberOfTopItemsSold = 5 - - static func deltaColor(for direction: StatsDataTextFormatter.DeltaPercentage.Direction) -> UIColor { - switch direction { - case .positive: - return .withColorStudio(.green, shade: .shade50) - case .negative, .zero: - return .withColorStudio(.red, shade: .shade40) - } - } } enum Localization { diff --git a/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsProductCard.swift b/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsProductCard.swift index 4c43942742c..2a0d6a704cb 100644 --- a/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsProductCard.swift +++ b/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsProductCard.swift @@ -14,6 +14,9 @@ struct AnalyticsProductCard: View { /// Delta Tag background color. let deltaBackgroundColor: UIColor + /// Delta Tag text color. + let deltaTextColor: UIColor + /// Items Solds data to render. /// let itemsSoldData: [TopPerformersRow.Data] @@ -49,7 +52,7 @@ struct AnalyticsProductCard: View { .redacted(reason: isRedacted ? .placeholder : []) .shimmering(active: isRedacted) - DeltaTag(value: delta, backgroundColor: deltaBackgroundColor) + DeltaTag(value: delta, backgroundColor: deltaBackgroundColor, textColor: deltaTextColor) .redacted(reason: isRedacted ? .placeholder : []) .shimmering(active: isRedacted) } @@ -105,6 +108,7 @@ struct AnalyticsProductCardPreviews: PreviewProvider { AnalyticsProductCard(itemsSold: "2,234", delta: "+23%", deltaBackgroundColor: .withColorStudio(.green, shade: .shade50), + deltaTextColor: .textInverted, itemsSoldData: [ .init(imageURL: imageURL, name: "Tabletop Photos", details: "Net Sales: $1,232", value: "32"), .init(imageURL: imageURL, name: "Kentya Palm", details: "Net Sales: $800", value: "10"), @@ -119,6 +123,7 @@ struct AnalyticsProductCardPreviews: PreviewProvider { AnalyticsProductCard(itemsSold: "-", delta: "0%", deltaBackgroundColor: .withColorStudio(.gray, shade: .shade0), + deltaTextColor: .text, itemsSoldData: [], isRedacted: false, showStatsError: true, diff --git a/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsProductCardViewModel.swift b/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsProductCardViewModel.swift index 30a5fed67ef..297987dc466 100644 --- a/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsProductCardViewModel.swift +++ b/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsProductCardViewModel.swift @@ -17,6 +17,10 @@ struct AnalyticsProductCardViewModel { /// let deltaBackgroundColor: UIColor + /// Delta text color. + /// + let deltaTextColor: UIColor + /// Items Solds data to render. /// let itemsSoldData: [TopPerformersRow.Data] @@ -43,6 +47,7 @@ extension AnalyticsProductCardViewModel { .init(itemsSold: "1000", delta: "+50%", deltaBackgroundColor: .lightGray, + deltaTextColor: .text, itemsSoldData: [.init(imageURL: nil, name: "Product Name", details: "Net Sales", value: "$5678")], isRedacted: true, showStatsError: false, @@ -58,6 +63,7 @@ extension AnalyticsProductCard { self.itemsSold = viewModel.itemsSold self.delta = viewModel.delta self.deltaBackgroundColor = viewModel.deltaBackgroundColor + self.deltaTextColor = viewModel.deltaTextColor self.itemsSoldData = viewModel.itemsSoldData self.isRedacted = viewModel.isRedacted self.showStatsError = viewModel.showStatsError diff --git a/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsReportCard.swift b/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsReportCard.swift index 55e02879568..5bde4f94e00 100644 --- a/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsReportCard.swift +++ b/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsReportCard.swift @@ -9,12 +9,16 @@ struct AnalyticsReportCard: View { let leadingValue: String let leadingDelta: String let leadingDeltaColor: UIColor + let leadingDeltaTextColor: UIColor let leadingChartData: [Double] + let leadingChartColor: UIColor let trailingTitle: String let trailingValue: String let trailingDelta: String let trailingDeltaColor: UIColor + let trailingDeltaTextColor: UIColor let trailingChartData: [Double] + let trailingChartColor: UIColor let isRedacted: Bool @@ -47,12 +51,12 @@ struct AnalyticsReportCard: View { .shimmering(active: isRedacted) AdaptiveStack(horizontalAlignment: .leading) { - DeltaTag(value: leadingDelta, backgroundColor: leadingDeltaColor) + DeltaTag(value: leadingDelta, backgroundColor: leadingDeltaColor, textColor: leadingDeltaTextColor) .frame(maxWidth: .infinity, alignment: .leading) .redacted(reason: isRedacted ? .placeholder : []) .shimmering(active: isRedacted) - AnalyticsLineChart(dataPoints: leadingChartData, lineChartColor: leadingDeltaColor) + AnalyticsLineChart(dataPoints: leadingChartData, lineChartColor: leadingChartColor) .frame(width: scaledChartWidth, height: scaledChartHeight) } @@ -71,12 +75,12 @@ struct AnalyticsReportCard: View { .shimmering(active: isRedacted) AdaptiveStack(horizontalAlignment: .leading) { - DeltaTag(value: trailingDelta, backgroundColor: trailingDeltaColor) + DeltaTag(value: trailingDelta, backgroundColor: trailingDeltaColor, textColor: trailingDeltaTextColor) .frame(maxWidth: .infinity, alignment: .leading) .redacted(reason: isRedacted ? .placeholder : []) .shimmering(active: isRedacted) - AnalyticsLineChart(dataPoints: trailingChartData, lineChartColor: trailingDeltaColor) + AnalyticsLineChart(dataPoints: trailingChartData, lineChartColor: trailingChartColor) .frame(width: scaledChartWidth, height: scaledChartHeight) } } @@ -114,12 +118,16 @@ struct Previews: PreviewProvider { leadingValue: "$3.678", leadingDelta: "+23%", leadingDeltaColor: .withColorStudio(.green, shade: .shade40), + leadingDeltaTextColor: .textInverted, leadingChartData: [0.0, 10.0, 2.0, 20.0, 15.0, 40.0, 0.0, 10.0, 2.0, 20.0, 15.0, 50.0], + leadingChartColor: .withColorStudio(.green, shade: .shade40), trailingTitle: "Net Sales", trailingValue: "$3.232", trailingDelta: "-3%", trailingDeltaColor: .withColorStudio(.red, shade: .shade40), + trailingDeltaTextColor: .textInverted, trailingChartData: [50.0, 15.0, 20.0, 2.0, 10.0, 0.0, 40.0, 15.0, 20.0, 2.0, 10.0, 0.0], + trailingChartColor: .withColorStudio(.red, shade: .shade40), isRedacted: false, showSyncError: false, syncErrorMessage: "") @@ -130,12 +138,16 @@ struct Previews: PreviewProvider { leadingValue: "-", leadingDelta: "0%", leadingDeltaColor: .withColorStudio(.gray, shade: .shade0), + leadingDeltaTextColor: .text, leadingChartData: [], + leadingChartColor: .withColorStudio(.gray, shade: .shade30), trailingTitle: "Net Sales", trailingValue: "-", trailingDelta: "0%", trailingDeltaColor: .withColorStudio(.gray, shade: .shade0), + trailingDeltaTextColor: .text, trailingChartData: [], + trailingChartColor: .withColorStudio(.gray, shade: .shade30), isRedacted: false, showSyncError: true, syncErrorMessage: "Error loading revenue analytics") diff --git a/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsReportCardViewModel.swift b/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsReportCardViewModel.swift index 822ef9fcfe2..76a37cc712c 100644 --- a/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsReportCardViewModel.swift +++ b/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsReportCardViewModel.swift @@ -25,10 +25,18 @@ struct AnalyticsReportCardViewModel { /// let leadingDeltaColor: UIColor + /// First Column delta text color. + /// + let leadingDeltaTextColor: UIColor + /// First Column Chart Data /// let leadingChartData: [Double] + /// First Column Chart Color + /// + let leadingChartColor: UIColor + /// Second Column Title /// let trailingTitle: String @@ -45,10 +53,18 @@ struct AnalyticsReportCardViewModel { /// let trailingDeltaColor: UIColor + /// Second Column delta text color. + /// + let trailingDeltaTextColor: UIColor + /// Second Column Chart Data /// let trailingChartData: [Double] + /// Second Column Chart Color + /// + let trailingChartColor: UIColor + /// Indicates if the values should be hidden (for loading state) /// let isRedacted: Bool @@ -73,12 +89,16 @@ extension AnalyticsReportCardViewModel { leadingValue: "$1000", leadingDelta: "+50%", leadingDeltaColor: .lightGray, + leadingDeltaTextColor: .text, leadingChartData: [], + leadingChartColor: .lightGray, trailingTitle: trailingTitle, trailingValue: "$1000", trailingDelta: "+50%", trailingDeltaColor: .lightGray, + trailingDeltaTextColor: .text, trailingChartData: [], + trailingChartColor: .lightGray, isRedacted: true, showSyncError: false, syncErrorMessage: "") @@ -94,12 +114,16 @@ extension AnalyticsReportCard { self.leadingValue = viewModel.leadingValue self.leadingDelta = viewModel.leadingDelta self.leadingDeltaColor = viewModel.leadingDeltaColor + self.leadingDeltaTextColor = viewModel.leadingDeltaTextColor self.leadingChartData = viewModel.leadingChartData + self.leadingChartColor = viewModel.leadingChartColor self.trailingTitle = viewModel.trailingTitle self.trailingValue = viewModel.trailingValue self.trailingDelta = viewModel.trailingDelta self.trailingDeltaColor = viewModel.trailingDeltaColor + self.trailingDeltaTextColor = viewModel.trailingDeltaTextColor self.trailingChartData = viewModel.trailingChartData + self.trailingChartColor = viewModel.trailingChartColor self.isRedacted = viewModel.isRedacted self.showSyncError = viewModel.showSyncError self.syncErrorMessage = viewModel.syncErrorMessage diff --git a/WooCommerce/Classes/ViewRelated/Dashboard/Factories/StatsDataTextFormatter.swift b/WooCommerce/Classes/ViewRelated/Dashboard/Factories/StatsDataTextFormatter.swift index 3766f85f891..f065ed95ef2 100644 --- a/WooCommerce/Classes/ViewRelated/Dashboard/Factories/StatsDataTextFormatter.swift +++ b/WooCommerce/Classes/ViewRelated/Dashboard/Factories/StatsDataTextFormatter.swift @@ -220,6 +220,40 @@ extension StatsDataTextFormatter { case positive case negative case zero + + /// Background color for a `DeltaTag` + var deltaBackgroundColor: UIColor { + switch self { + case .positive: + return Constants.green + case .negative: + return Constants.red + case .zero: + return Constants.lightGray + } + } + + /// Text color for a `DeltaTag` + var deltaTextColor: UIColor { + switch self { + case .positive, .negative: + return .textInverted + case .zero: + return .text + } + } + + /// Line color for an `AnalyticsLineChart` + var chartColor: UIColor { + switch self { + case .positive: + return Constants.green + case .negative: + return Constants.red + case .zero: + return Constants.darkGray + } + } } } } @@ -292,6 +326,10 @@ private extension StatsDataTextFormatter { enum Constants { static let placeholderText = "-" + static let green: UIColor = .withColorStudio(.green, shade: .shade50) + static let red: UIColor = .withColorStudio(.red, shade: .shade40) + static let lightGray: UIColor = .withColorStudio(.gray, shade: .shade0) + static let darkGray: UIColor = .withColorStudio(.gray, shade: .shade30) } diff --git a/WooCommerce/Classes/ViewRelated/ReusableViews/SwiftUI Components/DeltaTag.swift b/WooCommerce/Classes/ViewRelated/ReusableViews/SwiftUI Components/DeltaTag.swift index 2af63d31539..5896350a48e 100644 --- a/WooCommerce/Classes/ViewRelated/ReusableViews/SwiftUI Components/DeltaTag.swift +++ b/WooCommerce/Classes/ViewRelated/ReusableViews/SwiftUI Components/DeltaTag.swift @@ -13,10 +13,14 @@ struct DeltaTag: View { /// let backgroundColor: UIColor + /// Text color. + /// + let textColor: UIColor + var body: some View { Text(value) .padding(Layout.backgroundPadding) - .foregroundColor(Color(.textInverted)) + .foregroundColor(Color(textColor)) .captionStyle() .background(Color(backgroundColor)) .cornerRadius(Layout.cornerRadius) @@ -31,13 +35,15 @@ private extension DeltaTag { } } -// MARK: Peviews +// MARK: Previews struct DeltaTagPreviews: PreviewProvider { static var previews: some View { VStack { - DeltaTag(value: "+3.23%", backgroundColor: .systemGreen) + DeltaTag(value: "+3.23%", backgroundColor: .systemGreen, textColor: .textInverted) + + DeltaTag(value: "-3.23%", backgroundColor: .systemRed, textColor: .textInverted) - DeltaTag(value: "-3.23%", backgroundColor: .systemRed) + DeltaTag(value: "0%", backgroundColor: .lightGray, textColor: .text) } .previewLayout(.sizeThatFits) }