[New Stats] Add support for tapping on individual bars (#24768)

* Add support for tapping on bars in bar chart

* Update events

* Adjust how offset is done

* Update granularity for under 2 years

* Fix an issue with bar chart showing incorrect labels depending on the site reporting time zone

* Disable selection when both data points are zero

* Add tap highlight when navigation down the timeline

* Cleanup

Author: kean

Modules/Sources/JetpackStats/Analytics/StatsEvent.swift

@@ -88,6 +88,13 @@ public enum StatsEvent {
     ///   - "metric": The metric selected (e.g., "visitors", "views", "likes")
     case chartMetricSelected
 
+    /// Chart bar selected for drill-down
+    /// - Parameters:
+    ///   - "from_granularity": The current granularity (e.g., "day", "month")
+    ///   - "metric": The metric being viewed
+    ///   - "value": The value of the selected bar
+    case chartBarSelected
+
     // MARK: - List Events
 
     /// Top list item tapped

Modules/Sources/JetpackStats/Cards/ChartCard.swift

@@ -4,6 +4,10 @@ import Charts
 struct ChartCard: View {
     @ObservedObject private var viewModel: ChartCardViewModel
 
+    private var onDateRangeSelected: ((StatsDateRange) -> Void)?
+    private var backButtonTitle: String?
+    private var backButtonAction: (() -> Void)?
+
     private var dateRange: StatsDateRange { viewModel.dateRange }
     private var metrics: [SiteMetric] { viewModel.metrics }
     private var selectedMetric: SiteMetric { viewModel.selectedMetric }
@@ -37,7 +41,10 @@ struct ChartCard: View {
             viewModel.onAppear()
         }
         .overlay(alignment: .topTrailing) {
-            moreMenu
+            HStack(alignment: .center, spacing: 0) {
+                backButton
+                moreMenu
+            }
         }
         .cardStyle()
         .grayscale(viewModel.isStale ? 1 : 0)
@@ -66,14 +73,32 @@ struct ChartCard: View {
     }
 
     private func headerView(for metric: SiteMetric) -> some View {
-        HStack {
+        HStack(alignment: .center) {
             StatsCardTitleView(title: metric.localizedTitle, showChevron: false)
-            Spacer(minLength: 44)
+            Spacer(minLength: 0)
         }
+        .animation(.spring, value: backButtonTitle)
         .accessibilityElement(children: .combine)
         .accessibilityLabel(Strings.Accessibility.cardTitle(metric.localizedTitle))
     }
 
+    @ViewBuilder
+    private var backButton: some View {
+        if let title = backButtonTitle, let action = backButtonAction {
+            Button(action: action) {
+                HStack(spacing: 4) {
+                    Image(systemName: "chevron.backward")
+                        .font(.system(size: 12, weight: .bold))
+                    Text(title)
+                        .font(.system(size: 14, weight: .medium))
+                }
+                .foregroundColor(Constants.Colors.blue)
+            }
+            .buttonStyle(.plain)
+            .transition(.scale(scale: 0.9).combined(with: .opacity))
+        }
+    }
+
     @ViewBuilder
     private var contentView: some View {
         VStack(spacing: Constants.step0_5) {
@@ -226,9 +251,42 @@ struct ChartCard: View {
         case .line:
             LineChartView(data: data)
         case .columns:
-            BarChartView(data: data)
+            BarChartView(data: data) { selection in
+                handleDateSelection(selection, data: data)
+            }
         }
     }
+
+    private func handleDateSelection(_ selection: Date, data: ChartData) {
+        let calendar = viewModel.dateRange.calendar
+        let component = data.granularity.component
+        guard let interval = calendar.dateInterval(of: component, for: selection) else {
+            return assertionFailure("invalid component or date")
+        }
+        let newDateRange = StatsDateRange(
+            interval: interval,
+            component: component,
+            comparison: viewModel.dateRange.comparison,
+            calendar: calendar
+        )
+        onDateRangeSelected?(newDateRange)
+        viewModel.tracker?.send(.chartBarSelected)
+    }
+
+    /// Configures the back button for navigation history
+    func backButton(title: String?, action: (() -> Void)?) -> ChartCard {
+        var copy = self
+        copy.backButtonTitle = title
+        copy.backButtonAction = action
+        return copy
+    }
+
+    /// Configures the action when a bar is tapped for drill-down navigation
+    func onDateRangeSelected(_ action: @escaping (StatsDateRange) -> Void) -> ChartCard {
+        var copy = self
+        copy.onDateRangeSelected = action
+        return copy
+    }
 }
 
 private struct CardGradientBackground: View {
@@ -267,8 +325,6 @@ enum ChartType: String, CaseIterable, Codable {
     }
 }
 
-// MARK: - Preview
-
 private struct ChartCardPreview: View {
     @StateObject var viewModel = ChartCardViewModel(
         configuration: ChartCardConfiguration(

Modules/Sources/JetpackStats/Cards/ChartCardConfiguration.swift

@@ -5,7 +5,7 @@ struct ChartCardConfiguration: Codable {
     var metrics: [SiteMetric]
     var chartType: ChartType
 
-    init(id: UUID = UUID(), metrics: [SiteMetric], chartType: ChartType = .line) {
+    init(id: UUID = UUID(), metrics: [SiteMetric], chartType: ChartType = .columns) {
         self.id = id
         self.metrics = metrics
         self.chartType = chartType

Modules/Sources/JetpackStats/Charts/BarChartView.swift

@@ -3,9 +3,13 @@ import Charts
 
 struct BarChartView: View {
     let data: ChartData
+    var onDateSelected: ((Date) -> Void)? = nil
 
-    @State private var selectedDate: Date?
     @State private var selectedDataPoints: SelectedDataPoints?
+    @State private var isDragging = false
+    @State private var isLongPressing = false
+    @State private var longPressLocation: CGPoint?
+    @State private var tappedDataPoint: DataPoint?
 
     @Environment(\.context) var context
 
@@ -31,15 +35,17 @@ struct BarChartView: View {
         .chartYScale(domain: yAxisDomain)
         .chartLegend(.hidden)
         .environment(\.timeZone, context.timeZone)
-        .modifier(ChartSelectionModifier(selection: $selectedDate))
         .animation(.spring, value: ObjectIdentifier(data))
-        .onChange(of: selectedDate) {
-            selectedDataPoints = SelectedDataPoints.compute(for: $0, data: data)
+        .chartOverlay { proxy in
+            makeGesturesOverlayView(proxy: proxy)
         }
         .dynamicTypeSize(...DynamicTypeSize.xxxLarge)
         .accessibilityElement()
         .accessibilityLabel(Strings.Accessibility.chartContainer)
         .accessibilityHint(Strings.Accessibility.viewChartData)
+        .onChange(of: ObjectIdentifier(data)) { _ in
+            tappedDataPoint = nil
+        }
     }
 
     // MARK: - Chart Marks
@@ -48,7 +54,7 @@ struct BarChartView: View {
     private var currentPeriodBars: some ChartContent {
         ForEach(data.currentData) { point in
             BarMark(
-                x: .value("Date", point.date, unit: data.granularity.component),
+                x: .value("Date", point.date, unit: data.granularity.component, calendar: context.calendar),
                 y: .value("Value", point.value),
                 width: .automatic
             )
@@ -68,7 +74,15 @@ struct BarChartView: View {
     }
 
     private func getOpacityForCurrentPeriodBar(for point: DataPoint) -> CGFloat {
+        if let tappedDataPoint, tappedDataPoint.id == point.id {
+            return 1.0
+        }
         guard let selectedDataPoints else {
+            // If there's a tapped point, dim other bars
+            if tappedDataPoint != nil {
+                return 0.5
+            }
+            // If no selection and not tapped, check if data is incomplete
             let isIncomplete = context.calendar.isIncompleteDataPeriod(for: point.date, granularity: data.granularity)
             return isIncomplete ? 0.5 : 1
         }
@@ -79,7 +93,7 @@ struct BarChartView: View {
     private var previousPeriodBars: some ChartContent {
         ForEach(data.mappedPreviousData) { point in
             BarMark(
-                x: .value("Date", point.date, unit: data.granularity.component),
+                x: .value("Date", point.date, unit: data.granularity.component, calendar: context.calendar),
                 y: .value("Value", point.value),
                 width: .automatic,
                 stacking: .unstacked
@@ -113,7 +127,7 @@ struct BarChartView: View {
     private var significantPointAnnotations: some ChartContent {
         if let maxPoint = data.significantPoints.currentMax, data.currentData.count > 0 {
             PointMark(
-                x: .value("Date", maxPoint.date, unit: data.granularity.component),
+                x: .value("Date", maxPoint.date, unit: data.granularity.component, calendar: context.calendar),
                 y: .value("Value", maxPoint.value)
             )
             .opacity(0)
@@ -123,7 +137,7 @@ struct BarChartView: View {
                     metric: data.metric
                 )
                 // Important for drag selection to work correctly.
-                .opacity(selectedDate == nil ? 1 : 0)
+                .opacity(selectedDataPoints == nil ? 1 : 0)
             }
         }
     }
@@ -174,6 +188,7 @@ struct BarChartView: View {
             if let date = value.as(Date.self) {
                 AxisValueLabel {
                     ChartAxisDateLabel(date: date, granularity: data.granularity)
+                        .offset(x: -2) // Align it better with bars
                 }
             }
         }
@@ -220,6 +235,100 @@ struct BarChartView: View {
             )
         }
     }
+
+    // MARK: - Gestures
+
+    private func makeGesturesOverlayView(proxy: ChartProxy) -> some View {
+        GeometryReader { geometry in
+            Rectangle()
+                .fill(.clear)
+                .contentShape(Rectangle())
+                .onTapGesture { location in
+                    handleTapGesture(at: location, proxy: proxy, geometry: geometry)
+                }
+                .onLongPressGesture(minimumDuration: 0.3) {
+                    // Long press completed - keep showing annotation
+                } onPressingChanged: { isPressing in
+                    if isPressing {
+                        // Long press started - show annotation at current location
+                        if let location = longPressLocation {
+                            isLongPressing = true
+                            selectedDataPoints = getSelectedDataPoints(at: location, proxy: proxy, geometry: geometry)
+                        }
+                    } else {
+                        // Long press ended - clear annotation
+                        isLongPressing = false
+                        longPressLocation = nil
+                        if !isDragging {
+                            selectedDataPoints = nil
+                        }
+                        tappedDataPoint = nil
+                    }
+                }
+                .simultaneousGesture(
+                    DragGesture(minimumDistance: 0)
+                        .onChanged { value in
+                            // Store location for long press
+                            longPressLocation = value.location
+
+                            // Handle drag if moved enough
+                            if value.translation.width.magnitude > 8 || value.translation.height.magnitude > 8 {
+                                isDragging = true
+                                selectedDataPoints = getSelectedDataPoints(at: value.location, proxy: proxy, geometry: geometry)
+                            }
+                        }
+                        .onEnded { _ in
+                            isDragging = false
+                            longPressLocation = nil
+                            if !isLongPressing {
+                                selectedDataPoints = nil
+                            }
+                            tappedDataPoint = nil
+                        }
+                )
+        }
+    }
+
+    private func handleTapGesture(at location: CGPoint, proxy: ChartProxy, geometry: GeometryProxy) {
+        // Only handle tap if not dragging or long pressing
+        guard !isDragging && !isLongPressing else { return }
+
+        guard let onDateSelected,
+              data.granularity != .hour,
+              let selection = getSelectedDataPoints(at: location, proxy: proxy, geometry: geometry),
+              selection.current?.value != 0 || selection.previous?.value != 0 else {
+            // Clear selection if tapping on empty area
+            tappedDataPoint = nil
+            return
+        }
+        tappedDataPoint = selection.current ?? selection.previous
+        if let date = tappedDataPoint?.date {
+            onDateSelected(date)
+        }
+    }
+
+    private func getSelectedDataPoints(at location: CGPoint, proxy: ChartProxy, geometry: GeometryProxy) -> SelectedDataPoints? {
+        let origin = geometry[proxy.plotAreaFrame].origin
+        let location = CGPoint(
+            x: location.x - origin.x,
+            y: location.y - origin.y
+        )
+        guard let date: Date = proxy.value(atX: location.x) else {
+            return nil
+        }
+        // Calling `proxy.value(atX: location.x)` returns dates with a second
+        // precision. But the data points are represented using the start of the
+        // period. The chart needs to offset the selection so that
+        // `SelectedDataPoints.compute` correctly finds the closest one.
+        let interval: TimeInterval = {
+            let now = Date()
+            let interval = context.calendar.date(byAdding: data.granularity.component, value: 1, to: now)
+            return (interval ?? now).timeIntervalSince(now)
+        }()
+
+        let offsetDate = date.addingTimeInterval(-(interval / 4))
+        return SelectedDataPoints.compute(for: offsetDate, data: data)
+    }
 }
 
 // MARK: - Preview

Modules/Sources/JetpackStats/Screens/TrafficTabView.swift

@@ -92,6 +92,14 @@ struct TrafficTabView: View {
         switch viewModel {
         case let viewModel as ChartCardViewModel:
             ChartCard(viewModel: viewModel)
+                .onDateRangeSelected { dateRange in
+                    UIImpactFeedbackGenerator(style: .light).impactOccurred()
+                    self.viewModel.pushDateRange(dateRange)
+                }
+                .backButton(title: getBackButtonTitle()) {
+                    UIImpactFeedbackGenerator(style: .light).impactOccurred()
+                    self.viewModel.popDateRange()
+                }
         case let viewModel as TopListViewModel:
             TopListCard(viewModel: viewModel)
         default:
@@ -100,6 +108,14 @@ struct TrafficTabView: View {
         }
     }
 
+    private func getBackButtonTitle() -> String? {
+        guard let range = viewModel.dateRangeNavigationStack.last else {
+            return nil
+        }
+        let formatter = StatsDateRangeFormatter(timeZone: context.timeZone)
+        return formatter.string(from: range.dateInterval)
+    }
+
     @ViewBuilder
     private func cardView(for card: TrafficCardViewModel) -> some View {
         makeItem(for: card)