Skip to content

Commit 52e2593

Browse files
rachelmcrrachelmcr
authored
Merge pull request #8317 from woocommerce/issue/8243-zero-delta-color
[Analytics Hub] Update colors for delta tag and chart with 0% change
2 parents e8b4feb + f7334be commit 52e2593

File tree

7 files changed

+114
-23
lines changed

7 files changed

+114
-23
lines changed

‎WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsHubViewModel.swift‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -206,13 +206,17 @@ private extension AnalyticsHubViewModel {
206206
leadingValue: StatsDataTextFormatter.createTotalRevenueText(orderStats: currentPeriodStats,
207207
selectedIntervalIndex: nil),
208208
leadingDelta: totalDelta.string,
209-
leadingDeltaColor: Constants.deltaColor(for: totalDelta.direction),
209+
leadingDeltaColor: totalDelta.direction.deltaBackgroundColor,
210+
leadingDeltaTextColor: totalDelta.direction.deltaTextColor,
210211
leadingChartData: StatsIntervalDataParser.getChartData(for: .totalRevenue, from: currentPeriodStats),
212+
leadingChartColor: totalDelta.direction.chartColor,
211213
trailingTitle: Localization.RevenueCard.trailingTitle,
212214
trailingValue: StatsDataTextFormatter.createNetRevenueText(orderStats: currentPeriodStats),
213215
trailingDelta: netDelta.string,
214-
trailingDeltaColor: Constants.deltaColor(for: netDelta.direction),
216+
trailingDeltaColor: netDelta.direction.deltaBackgroundColor,
217+
trailingDeltaTextColor: netDelta.direction.deltaTextColor,
215218
trailingChartData: StatsIntervalDataParser.getChartData(for: .netRevenue, from: currentPeriodStats),
219+
trailingChartColor: netDelta.direction.chartColor,
216220
isRedacted: false,
217221
showSyncError: showSyncError,
218222
syncErrorMessage: Localization.RevenueCard.noRevenue)
@@ -228,13 +232,17 @@ private extension AnalyticsHubViewModel {
228232
leadingValue: StatsDataTextFormatter.createOrderCountText(orderStats: currentPeriodStats,
229233
selectedIntervalIndex: nil),
230234
leadingDelta: ordersCountDelta.string,
231-
leadingDeltaColor: Constants.deltaColor(for: ordersCountDelta.direction),
235+
leadingDeltaColor: ordersCountDelta.direction.deltaBackgroundColor,
236+
leadingDeltaTextColor: ordersCountDelta.direction.deltaTextColor,
232237
leadingChartData: StatsIntervalDataParser.getChartData(for: .orderCount, from: currentPeriodStats),
238+
leadingChartColor: ordersCountDelta.direction.chartColor,
233239
trailingTitle: Localization.OrderCard.trailingTitle,
234240
trailingValue: StatsDataTextFormatter.createAverageOrderValueText(orderStats: currentPeriodStats),
235241
trailingDelta: orderValueDelta.string,
236-
trailingDeltaColor: Constants.deltaColor(for: orderValueDelta.direction),
242+
trailingDeltaColor: orderValueDelta.direction.deltaBackgroundColor,
243+
trailingDeltaTextColor: orderValueDelta.direction.deltaTextColor,
237244
trailingChartData: StatsIntervalDataParser.getChartData(for: .averageOrderValue, from: currentPeriodStats),
245+
trailingChartColor: orderValueDelta.direction.chartColor,
238246
isRedacted: false,
239247
showSyncError: showSyncError,
240248
syncErrorMessage: Localization.OrderCard.noOrders)
@@ -252,7 +260,8 @@ private extension AnalyticsHubViewModel {
252260

253261
return AnalyticsProductCardViewModel(itemsSold: itemsSold,
254262
delta: itemsSoldDelta.string,
255-
deltaBackgroundColor: Constants.deltaColor(for: itemsSoldDelta.direction),
263+
deltaBackgroundColor: itemsSoldDelta.direction.deltaBackgroundColor,
264+
deltaTextColor: itemsSoldDelta.direction.deltaTextColor,
256265
itemsSoldData: itemSoldRows(from: itemsSoldStats),
257266
isRedacted: false,
258267
showStatsError: showStatsError,
@@ -285,15 +294,6 @@ private extension AnalyticsHubViewModel {
285294
private extension AnalyticsHubViewModel {
286295
enum Constants {
287296
static let maxNumberOfTopItemsSold = 5
288-
289-
static func deltaColor(for direction: StatsDataTextFormatter.DeltaPercentage.Direction) -> UIColor {
290-
switch direction {
291-
case .positive:
292-
return .withColorStudio(.green, shade: .shade50)
293-
case .negative, .zero:
294-
return .withColorStudio(.red, shade: .shade40)
295-
}
296-
}
297297
}
298298

299299
enum Localization {

‎WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsProductCard.swift‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@ struct AnalyticsProductCard: View {
1414
/// Delta Tag background color.
1515
let deltaBackgroundColor: UIColor
1616

17+
/// Delta Tag text color.
18+
let deltaTextColor: UIColor
19+
1720
/// Items Solds data to render.
1821
///
1922
let itemsSoldData: [TopPerformersRow.Data]
@@ -49,7 +52,7 @@ struct AnalyticsProductCard: View {
4952
.redacted(reason: isRedacted ? .placeholder : [])
5053
.shimmering(active: isRedacted)
5154

52-
DeltaTag(value: delta, backgroundColor: deltaBackgroundColor)
55+
DeltaTag(value: delta, backgroundColor: deltaBackgroundColor, textColor: deltaTextColor)
5356
.redacted(reason: isRedacted ? .placeholder : [])
5457
.shimmering(active: isRedacted)
5558
}
@@ -105,6 +108,7 @@ struct AnalyticsProductCardPreviews: PreviewProvider {
105108
AnalyticsProductCard(itemsSold: "2,234",
106109
delta: "+23%",
107110
deltaBackgroundColor: .withColorStudio(.green, shade: .shade50),
111+
deltaTextColor: .textInverted,
108112
itemsSoldData: [
109113
.init(imageURL: imageURL, name: "Tabletop Photos", details: "Net Sales: $1,232", value: "32"),
110114
.init(imageURL: imageURL, name: "Kentya Palm", details: "Net Sales: $800", value: "10"),
@@ -119,6 +123,7 @@ struct AnalyticsProductCardPreviews: PreviewProvider {
119123
AnalyticsProductCard(itemsSold: "-",
120124
delta: "0%",
121125
deltaBackgroundColor: .withColorStudio(.gray, shade: .shade0),
126+
deltaTextColor: .text,
122127
itemsSoldData: [],
123128
isRedacted: false,
124129
showStatsError: true,

‎WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsProductCardViewModel.swift‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@ struct AnalyticsProductCardViewModel {
1717
///
1818
let deltaBackgroundColor: UIColor
1919

20+
/// Delta text color.
21+
///
22+
let deltaTextColor: UIColor
23+
2024
/// Items Solds data to render.
2125
///
2226
let itemsSoldData: [TopPerformersRow.Data]
@@ -43,6 +47,7 @@ extension AnalyticsProductCardViewModel {
4347
.init(itemsSold: "1000",
4448
delta: "+50%",
4549
deltaBackgroundColor: .lightGray,
50+
deltaTextColor: .text,
4651
itemsSoldData: [.init(imageURL: nil, name: "Product Name", details: "Net Sales", value: "$5678")],
4752
isRedacted: true,
4853
showStatsError: false,
@@ -58,6 +63,7 @@ extension AnalyticsProductCard {
5863
self.itemsSold = viewModel.itemsSold
5964
self.delta = viewModel.delta
6065
self.deltaBackgroundColor = viewModel.deltaBackgroundColor
66+
self.deltaTextColor = viewModel.deltaTextColor
6167
self.itemsSoldData = viewModel.itemsSoldData
6268
self.isRedacted = viewModel.isRedacted
6369
self.showStatsError = viewModel.showStatsError

‎WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsReportCard.swift‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,16 @@ struct AnalyticsReportCard: View {
99
let leadingValue: String
1010
let leadingDelta: String
1111
let leadingDeltaColor: UIColor
12+
let leadingDeltaTextColor: UIColor
1213
let leadingChartData: [Double]
14+
let leadingChartColor: UIColor
1315
let trailingTitle: String
1416
let trailingValue: String
1517
let trailingDelta: String
1618
let trailingDeltaColor: UIColor
19+
let trailingDeltaTextColor: UIColor
1720
let trailingChartData: [Double]
21+
let trailingChartColor: UIColor
1822

1923
let isRedacted: Bool
2024

@@ -47,12 +51,12 @@ struct AnalyticsReportCard: View {
4751
.shimmering(active: isRedacted)
4852

4953
AdaptiveStack(horizontalAlignment: .leading) {
50-
DeltaTag(value: leadingDelta, backgroundColor: leadingDeltaColor)
54+
DeltaTag(value: leadingDelta, backgroundColor: leadingDeltaColor, textColor: leadingDeltaTextColor)
5155
.frame(maxWidth: .infinity, alignment: .leading)
5256
.redacted(reason: isRedacted ? .placeholder : [])
5357
.shimmering(active: isRedacted)
5458

55-
AnalyticsLineChart(dataPoints: leadingChartData, lineChartColor: leadingDeltaColor)
59+
AnalyticsLineChart(dataPoints: leadingChartData, lineChartColor: leadingChartColor)
5660
.frame(width: scaledChartWidth, height: scaledChartHeight)
5761
}
5862

@@ -71,12 +75,12 @@ struct AnalyticsReportCard: View {
7175
.shimmering(active: isRedacted)
7276

7377
AdaptiveStack(horizontalAlignment: .leading) {
74-
DeltaTag(value: trailingDelta, backgroundColor: trailingDeltaColor)
78+
DeltaTag(value: trailingDelta, backgroundColor: trailingDeltaColor, textColor: trailingDeltaTextColor)
7579
.frame(maxWidth: .infinity, alignment: .leading)
7680
.redacted(reason: isRedacted ? .placeholder : [])
7781
.shimmering(active: isRedacted)
7882

79-
AnalyticsLineChart(dataPoints: trailingChartData, lineChartColor: trailingDeltaColor)
83+
AnalyticsLineChart(dataPoints: trailingChartData, lineChartColor: trailingChartColor)
8084
.frame(width: scaledChartWidth, height: scaledChartHeight)
8185
}
8286
}
@@ -114,12 +118,16 @@ struct Previews: PreviewProvider {
114118
leadingValue: "$3.678",
115119
leadingDelta: "+23%",
116120
leadingDeltaColor: .withColorStudio(.green, shade: .shade40),
121+
leadingDeltaTextColor: .textInverted,
117122
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],
123+
leadingChartColor: .withColorStudio(.green, shade: .shade40),
118124
trailingTitle: "Net Sales",
119125
trailingValue: "$3.232",
120126
trailingDelta: "-3%",
121127
trailingDeltaColor: .withColorStudio(.red, shade: .shade40),
128+
trailingDeltaTextColor: .textInverted,
122129
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],
130+
trailingChartColor: .withColorStudio(.red, shade: .shade40),
123131
isRedacted: false,
124132
showSyncError: false,
125133
syncErrorMessage: "")
@@ -130,12 +138,16 @@ struct Previews: PreviewProvider {
130138
leadingValue: "-",
131139
leadingDelta: "0%",
132140
leadingDeltaColor: .withColorStudio(.gray, shade: .shade0),
141+
leadingDeltaTextColor: .text,
133142
leadingChartData: [],
143+
leadingChartColor: .withColorStudio(.gray, shade: .shade30),
134144
trailingTitle: "Net Sales",
135145
trailingValue: "-",
136146
trailingDelta: "0%",
137147
trailingDeltaColor: .withColorStudio(.gray, shade: .shade0),
148+
trailingDeltaTextColor: .text,
138149
trailingChartData: [],
150+
trailingChartColor: .withColorStudio(.gray, shade: .shade30),
139151
isRedacted: false,
140152
showSyncError: true,
141153
syncErrorMessage: "Error loading revenue analytics")

‎WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsReportCardViewModel.swift‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,18 @@ struct AnalyticsReportCardViewModel {
2525
///
2626
let leadingDeltaColor: UIColor
2727

28+
/// First Column delta text color.
29+
///
30+
let leadingDeltaTextColor: UIColor
31+
2832
/// First Column Chart Data
2933
///
3034
let leadingChartData: [Double]
3135

36+
/// First Column Chart Color
37+
///
38+
let leadingChartColor: UIColor
39+
3240
/// Second Column Title
3341
///
3442
let trailingTitle: String
@@ -45,10 +53,18 @@ struct AnalyticsReportCardViewModel {
4553
///
4654
let trailingDeltaColor: UIColor
4755

56+
/// Second Column delta text color.
57+
///
58+
let trailingDeltaTextColor: UIColor
59+
4860
/// Second Column Chart Data
4961
///
5062
let trailingChartData: [Double]
5163

64+
/// Second Column Chart Color
65+
///
66+
let trailingChartColor: UIColor
67+
5268
/// Indicates if the values should be hidden (for loading state)
5369
///
5470
let isRedacted: Bool
@@ -73,12 +89,16 @@ extension AnalyticsReportCardViewModel {
7389
leadingValue: "$1000",
7490
leadingDelta: "+50%",
7591
leadingDeltaColor: .lightGray,
92+
leadingDeltaTextColor: .text,
7693
leadingChartData: [],
94+
leadingChartColor: .lightGray,
7795
trailingTitle: trailingTitle,
7896
trailingValue: "$1000",
7997
trailingDelta: "+50%",
8098
trailingDeltaColor: .lightGray,
99+
trailingDeltaTextColor: .text,
81100
trailingChartData: [],
101+
trailingChartColor: .lightGray,
82102
isRedacted: true,
83103
showSyncError: false,
84104
syncErrorMessage: "")
@@ -94,12 +114,16 @@ extension AnalyticsReportCard {
94114
self.leadingValue = viewModel.leadingValue
95115
self.leadingDelta = viewModel.leadingDelta
96116
self.leadingDeltaColor = viewModel.leadingDeltaColor
117+
self.leadingDeltaTextColor = viewModel.leadingDeltaTextColor
97118
self.leadingChartData = viewModel.leadingChartData
119+
self.leadingChartColor = viewModel.leadingChartColor
98120
self.trailingTitle = viewModel.trailingTitle
99121
self.trailingValue = viewModel.trailingValue
100122
self.trailingDelta = viewModel.trailingDelta
101123
self.trailingDeltaColor = viewModel.trailingDeltaColor
124+
self.trailingDeltaTextColor = viewModel.trailingDeltaTextColor
102125
self.trailingChartData = viewModel.trailingChartData
126+
self.trailingChartColor = viewModel.trailingChartColor
103127
self.isRedacted = viewModel.isRedacted
104128
self.showSyncError = viewModel.showSyncError
105129
self.syncErrorMessage = viewModel.syncErrorMessage

‎WooCommerce/Classes/ViewRelated/Dashboard/Factories/StatsDataTextFormatter.swift‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -220,6 +220,40 @@ extension StatsDataTextFormatter {
220220
case positive
221221
case negative
222222
case zero
223+
224+
/// Background color for a `DeltaTag`
225+
var deltaBackgroundColor: UIColor {
226+
switch self {
227+
case .positive:
228+
return Constants.green
229+
case .negative:
230+
return Constants.red
231+
case .zero:
232+
return Constants.lightGray
233+
}
234+
}
235+
236+
/// Text color for a `DeltaTag`
237+
var deltaTextColor: UIColor {
238+
switch self {
239+
case .positive, .negative:
240+
return .textInverted
241+
case .zero:
242+
return .text
243+
}
244+
}
245+
246+
/// Line color for an `AnalyticsLineChart`
247+
var chartColor: UIColor {
248+
switch self {
249+
case .positive:
250+
return Constants.green
251+
case .negative:
252+
return Constants.red
253+
case .zero:
254+
return Constants.darkGray
255+
}
256+
}
223257
}
224258
}
225259
}
@@ -292,6 +326,10 @@ private extension StatsDataTextFormatter {
292326

293327
enum Constants {
294328
static let placeholderText = "-"
329+
static let green: UIColor = .withColorStudio(.green, shade: .shade50)
330+
static let red: UIColor = .withColorStudio(.red, shade: .shade40)
331+
static let lightGray: UIColor = .withColorStudio(.gray, shade: .shade0)
332+
static let darkGray: UIColor = .withColorStudio(.gray, shade: .shade30)
295333
}
296334

297335

‎WooCommerce/Classes/ViewRelated/ReusableViews/SwiftUI Components/DeltaTag.swift‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,14 @@ struct DeltaTag: View {
1313
///
1414
let backgroundColor: UIColor
1515

16+
/// Text color.
17+
///
18+
let textColor: UIColor
19+
1620
var body: some View {
1721
Text(value)
1822
.padding(Layout.backgroundPadding)
19-
.foregroundColor(Color(.textInverted))
23+
.foregroundColor(Color(textColor))
2024
.captionStyle()
2125
.background(Color(backgroundColor))
2226
.cornerRadius(Layout.cornerRadius)
@@ -31,13 +35,15 @@ private extension DeltaTag {
3135
}
3236
}
3337

34-
// MARK: Peviews
38+
// MARK: Previews
3539
struct DeltaTagPreviews: PreviewProvider {
3640
static var previews: some View {
3741
VStack {
38-
DeltaTag(value: "+3.23%", backgroundColor: .systemGreen)
42+
DeltaTag(value: "+3.23%", backgroundColor: .systemGreen, textColor: .textInverted)
43+
44+
DeltaTag(value: "-3.23%", backgroundColor: .systemRed, textColor: .textInverted)
3945

40-
DeltaTag(value: "-3.23%", backgroundColor: .systemRed)
46+
DeltaTag(value: "0%", backgroundColor: .lightGray, textColor: .text)
4147
}
4248
.previewLayout(.sizeThatFits)
4349
}

0 commit comments

Comments
 (0)