Skip to content

Commit d9be157

Browse files
EcarrionEcarrion
authored
Merge pull request #8177 from woocommerce/issue/8148-cards
Analytics Hub: Adds Report Card
2 parents 6ee83f1 + 6614415 commit d9be157

File tree

4 files changed

+147
-8
lines changed

4 files changed

+147
-8
lines changed

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

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -36,21 +36,33 @@ struct AnalyticsHubView: View {
3636
VStack(spacing: 0) {
3737
Divider()
3838

39-
Text("Placeholder For Revenue Card")
40-
.padding(.leading)
41-
.frame(maxWidth: .infinity, minHeight: 220, alignment: .leading)
42-
.background(Color(uiColor: .listForeground))
39+
AnalyticsReportCard(title: "REVENUE",
40+
leadingTitle: "Total Sales",
41+
leadingValue: "$3.234",
42+
leadingDelta: "+23%",
43+
leadingDeltaColor: .withColorStudio(.green, shade: .shade50),
44+
trailingTitle: "Net Sales",
45+
trailingValue: "$2.324",
46+
trailingDelta: "-4%",
47+
trailingDeltaColor: .withColorStudio(.red, shade: .shade40))
48+
.background(Color(uiColor: .listForeground))
4349

4450
Divider()
4551
}
4652

4753
VStack(spacing: 0) {
4854
Divider()
4955

50-
Text("Placeholder For Orders Card")
51-
.padding(.leading)
52-
.frame(maxWidth: .infinity, minHeight: 220, alignment: .leading)
53-
.background(Color(uiColor: .listForeground))
56+
AnalyticsReportCard(title: "ORDERS",
57+
leadingTitle: "Total Orders",
58+
leadingValue: "145",
59+
leadingDelta: "+36%",
60+
leadingDeltaColor: .withColorStudio(.green, shade: .shade50),
61+
trailingTitle: "Average Order Value",
62+
trailingValue: "$57,99",
63+
trailingDelta: "-16%",
64+
trailingDeltaColor: .withColorStudio(.red, shade: .shade40))
65+
.background(Color(uiColor: .listForeground))
5466

5567
Divider()
5668
}

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

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import SwiftUI
2+
3+
/// Resuable report card made for the Analytics Hub.
4+
///
5+
struct AnalyticsReportCard: View {
6+
7+
let title: String
8+
let leadingTitle: String
9+
let leadingValue: String
10+
let leadingDelta: String
11+
let leadingDeltaColor: UIColor
12+
let trailingTitle: String
13+
let trailingValue: String
14+
let trailingDelta: String
15+
let trailingDeltaColor: UIColor
16+
17+
var body: some View {
18+
VStack(alignment: .leading, spacing: Layout.titleSpacing) {
19+
20+
Text(title)
21+
.foregroundColor(Color(.text))
22+
.footnoteStyle()
23+
24+
HStack {
25+
26+
/// Leading Column
27+
///
28+
VStack(alignment: .leading, spacing: Layout.columnSpacing) {
29+
30+
Text(leadingTitle)
31+
.calloutStyle()
32+
33+
Text(leadingValue)
34+
.titleStyle()
35+
36+
DeltaTag(value: leadingDelta, backgroundColor: leadingDeltaColor)
37+
38+
}
39+
.frame(maxWidth: .infinity, alignment: .leading)
40+
41+
/// Trailing Column
42+
///
43+
VStack(alignment: .leading, spacing: Layout.columnSpacing) {
44+
Text(trailingTitle)
45+
.calloutStyle()
46+
47+
Text(trailingValue)
48+
.titleStyle()
49+
50+
DeltaTag(value: trailingDelta, backgroundColor: trailingDeltaColor)
51+
}
52+
.frame(maxWidth: .infinity, alignment: .leading)
53+
}
54+
}
55+
.padding(Layout.cardPadding)
56+
}
57+
}
58+
59+
private struct DeltaTag: View {
60+
61+
let value: String
62+
let backgroundColor: UIColor
63+
64+
var body: some View {
65+
Text(value)
66+
.padding(AnalyticsReportCard.Layout.deltaBackgroundPadding)
67+
.foregroundColor(Color(.textInverted))
68+
.captionStyle()
69+
.background(Color(backgroundColor))
70+
.cornerRadius(AnalyticsReportCard.Layout.deltaCornerRadius)
71+
}
72+
}
73+
74+
// MARK: Constants
75+
private extension AnalyticsReportCard {
76+
enum Layout {
77+
static let titleSpacing: CGFloat = 24
78+
static let cardPadding: CGFloat = 16
79+
static let columnSpacing: CGFloat = 10
80+
static let deltaBackgroundPadding = EdgeInsets(top: 2, leading: 8, bottom: 2, trailing: 8)
81+
static let deltaCornerRadius: CGFloat = 4.0
82+
}
83+
}
84+
85+
// MARK: Previews
86+
struct Previews: PreviewProvider {
87+
static var previews: some View {
88+
AnalyticsReportCard(title: "REVENUE",
89+
leadingTitle: "Total Sales",
90+
leadingValue: "$3.678",
91+
leadingDelta: "+23%",
92+
leadingDeltaColor: .withColorStudio(.green, shade: .shade40),
93+
trailingTitle: "Net Sales",
94+
trailingValue: "$3.232",
95+
trailingDelta: "-3%",
96+
trailingDeltaColor: .withColorStudio(.red, shade: .shade40))
97+
.previewLayout(.sizeThatFits)
98+
}
99+
}

‎WooCommerce/WooCommerce.xcodeproj/project.pbxproj‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -559,6 +559,7 @@
559559
263E38472641FF3400260D3B /* Codegen in Embed Frameworks */ = {isa = PBXBuildFile; productRef = 263E38452641FF3400260D3B /* Codegen */; settings = {ATTRIBUTES = (CodeSignOnCopy, ); }; };
560560
263EB409242C58EA00F3A15F /* ProductFormActionsFactoryTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 263EB408242C58EA00F3A15F /* ProductFormActionsFactoryTests.swift */; };
561561
2647F7B529280A7F00D59FDF /* AnalyticsHubView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2647F7B429280A7F00D59FDF /* AnalyticsHubView.swift */; };
562+
2647F7BA292BE2F900D59FDF /* StatsCard.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2647F7B9292BE2F900D59FDF /* StatsCard.swift */; };
562563
265284022624937600F91BA1 /* AddOnCrossreferenceUseCase.swift in Sources */ = {isa = PBXBuildFile; fileRef = 265284012624937600F91BA1 /* AddOnCrossreferenceUseCase.swift */; };
563564
265284092624ACE900F91BA1 /* AddOnCrossreferenceTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 265284082624ACE900F91BA1 /* AddOnCrossreferenceTests.swift */; };
564565
2655905B27863D1300BB8457 /* MockCollectOrderPaymentUseCase.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2655905A27863D1300BB8457 /* MockCollectOrderPaymentUseCase.swift */; };
@@ -2524,6 +2525,7 @@
25242525
26309F16277D0AEA0012797F /* SafeAreaInsetsKey.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SafeAreaInsetsKey.swift; sourceTree = "<group>"; };
25252526
263EB408242C58EA00F3A15F /* ProductFormActionsFactoryTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ProductFormActionsFactoryTests.swift; sourceTree = "<group>"; };
25262527
2647F7B429280A7F00D59FDF /* AnalyticsHubView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AnalyticsHubView.swift; sourceTree = "<group>"; };
2528+
2647F7B9292BE2F900D59FDF /* StatsCard.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = StatsCard.swift; sourceTree = "<group>"; };
25272529
265284012624937600F91BA1 /* AddOnCrossreferenceUseCase.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AddOnCrossreferenceUseCase.swift; sourceTree = "<group>"; };
25282530
265284082624ACE900F91BA1 /* AddOnCrossreferenceTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AddOnCrossreferenceTests.swift; sourceTree = "<group>"; };
25292531
2655905A27863D1300BB8457 /* MockCollectOrderPaymentUseCase.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MockCollectOrderPaymentUseCase.swift; sourceTree = "<group>"; };
@@ -5243,6 +5245,7 @@
52435245
isa = PBXGroup;
52445246
children = (
52455247
2647F7B429280A7F00D59FDF /* AnalyticsHubView.swift */,
5248+
2647F7B9292BE2F900D59FDF /* StatsCard.swift */,
52465249
);
52475250
path = "Analytics Hub";
52485251
sourceTree = "<group>";
@@ -10176,6 +10179,7 @@
1017610179
02482A8B237BE8C7007E73ED /* LinkSettingsViewController.swift in Sources */,
1017710180
CE227097228F152400C0626C /* WooBasicTableViewCell.swift in Sources */,
1017810181
02C27BCE282CB52F0065471A /* CardPresentPaymentReceiptEmailCoordinator.swift in Sources */,
10182+
2647F7BA292BE2F900D59FDF /* StatsCard.swift in Sources */,
1017910183
451526392577D89E0076B03C /* AddAttributeViewModel.swift in Sources */,
1018010184
DE0A2EAF281BA278007A8015 /* ProductCategorySelectorViewModel.swift in Sources */,
1018110185
45B9C64323A91CB6007FC4C5 /* PriceInputFormatter.swift in Sources */,

‎WooFoundation/WooFoundation/ViewModifiers/WooStyleModifiers.swift‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,22 @@ public struct FootnoteStyle: ViewModifier {
104104
}
105105
}
106106

107+
public struct CalloutStyle: ViewModifier {
108+
public func body(content: Content) -> some View {
109+
content
110+
.font(.callout)
111+
.foregroundColor(Color(.textSubtle))
112+
}
113+
}
114+
115+
public struct CaptionStyle: ViewModifier {
116+
public func body(content: Content) -> some View {
117+
content
118+
.font(.caption)
119+
.foregroundColor(Color(.text))
120+
}
121+
}
122+
107123
public struct ErrorStyle: ViewModifier {
108124
public func body(content: Content) -> some View {
109125
content
@@ -201,4 +217,12 @@ public extension View {
201217
func headlineLinkStyle() -> some View {
202218
self.modifier(HeadlineLinkStyle())
203219
}
220+
221+
func calloutStyle() -> some View {
222+
self.modifier(CalloutStyle())
223+
}
224+
225+
func captionStyle() -> some View {
226+
self.modifier(CaptionStyle())
227+
}
204228
}

0 commit comments

Comments
 (0)