Skip to content

[Analytics Hub] Update colors for delta tag and chart with 0% change #8317

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Dec 6, 2022
Merged

[Analytics Hub] Update colors for delta tag and chart with 0% change #8317

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5487309
Update text and background colors for 0% delta tag
rachelmcr Dec 5, 2022
5a53a46
Use darker gray for 0% chart line
rachelmcr Dec 5, 2022
f7334be
Make delta tag and line chart colors computed properties of DeltaPerc…
rachelmcr Dec 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 14 additions & 14 deletions WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsHubViewModel.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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)
Expand All @@ -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,
Expand Down Expand Up @@ -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 {
Expand Down
7 changes: 6 additions & 1 deletion WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsProductCard.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand Down Expand Up @@ -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)
}
Expand Down Expand Up @@ -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"),
Expand All @@ -119,6 +123,7 @@ struct AnalyticsProductCardPreviews: PreviewProvider {
AnalyticsProductCard(itemsSold: "-",
delta: "0%",
deltaBackgroundColor: .withColorStudio(.gray, shade: .shade0),
deltaTextColor: .text,
itemsSoldData: [],
isRedacted: false,
showStatsError: true,
Expand Down
6 changes: 6 additions & 0 deletions WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsProductCardViewModel.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ struct AnalyticsProductCardViewModel {
///
let deltaBackgroundColor: UIColor

/// Delta text color.
///
let deltaTextColor: UIColor

/// Items Solds data to render.
///
let itemsSoldData: [TopPerformersRow.Data]
Expand All @@ -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,
Expand All @@ -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
Expand Down
20 changes: 16 additions & 4 deletions WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsReportCard.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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)
}

Expand All @@ -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)
}
}
Expand Down Expand Up @@ -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: "")
Expand All @@ -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")
Expand Down
24 changes: 24 additions & 0 deletions WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsReportCardViewModel.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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: "")
Expand All @@ -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
Expand Down
38 changes: 38 additions & 0 deletions WooCommerce/Classes/ViewRelated/Dashboard/Factories/StatsDataTextFormatter.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}
}
}
}
Expand Down Expand Up @@ -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)
}


Expand Down
14 changes: 10 additions & 4 deletions WooCommerce/Classes/ViewRelated/ReusableViews/SwiftUI Components/DeltaTag.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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)
}
Expand Down