[PriceInsights][iOS] Polish the y Axis
This CL:
- Extends the bottom AxisTick to covert the longest yAxis label.
- Adds a color to the grid line and ticks.
- Sets the number of ticks to 3.
Screenshot: https://screenshot.googleplex.com/A8Ks3pmp2VbChiv.png
Bug: b/346813191
Change-Id: Iea90a222f55470666b2b93b70ee3d64412402dc2
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5627572
Reviewed-by: Robbie Gibson <rkgibson@google.com>
Commit-Queue: Cheick Cisse <cheickcisse@google.com>
Cr-Commit-Position: refs/heads/main@{#1314267}
diff --git a/ios/chrome/browser/price_insights/ui/price_history.swift b/ios/chrome/browser/price_insights/ui/price_history.swift
index 6ef12e2..e8565eb 100644
--- a/ios/chrome/browser/price_insights/ui/price_history.swift
+++ b/ios/chrome/browser/price_insights/ui/price_history.swift
@@ -105,8 +105,11 @@
/// Color representing solid white.
static let solidWhite = UIColor(named: kSolidWhiteColor) ?? .white
+ /// Color representing grey 200.
+ static let grey200 = UIColor(named: kGrey200Color) ?? .gray
+
/// Number of ticks on the Y-axis.
- static let tickCountY = 4
+ static let tickCountY = 3
/// The selected date on the graph.
@State private var selectedDate: Date?
@@ -182,14 +185,16 @@
AxisMarks(position: .leading, values: axisTicksY) { price in
if let price = price.as(Double.self) {
if price == axisTicksY.first {
- AxisTick()
+ AxisTick(length: .longestLabel, stroke: StrokeStyle(lineWidth: 1))
+ .foregroundStyle(Color(uiColor: Self.grey200))
} else {
AxisValueLabel(
format: .currency(code: currency).precision(.fractionLength(0)))
AxisTick(stroke: StrokeStyle(lineWidth: 0))
}
}
- AxisGridLine()
+ AxisGridLine(stroke: StrokeStyle(lineWidth: 1))
+ .foregroundStyle(Color(uiColor: Self.grey200))
}
}
.chartXScale(domain: axisXRange)