Climate Chart

Historical temperature trend visualization showing climate change over decades

Overview

The ClimateChartView component displays historical temperature data for the current date across multiple decades, visualizing local climate trends. It uses iOS Charts framework to render a bar chart showing how temperatures have changed over time, with color-coded bars indicating warming or cooling trends.

Visual Display

The chart presents:

• Header with trend icon and description
• Temperature unit toggle (Celsius/Fahrenheit)
• Change summary showing temperature difference from baseline year
• Bar chart with data points for each decade
• Color-coded bars (blue for cooling, gray for neutral, orange/red for warming)
• Value labels above each bar

Component Definition

struct ClimateChartView: View {
    let data: [ClimateDataPoint]
    @Binding var useFahrenheit: Bool
    let formatTemp: (Double) -> String
    let formatDiff: (Double) -> String
    
    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            // Header
            HStack {
                VStack(alignment: .leading, spacing: 4) {
                    HStack {
                        Image(systemName: "chart.line.uptrend.xyaxis")
                            .foregroundColor(.orange)
                        Text("Local Climate Trend")
                            .font(.headline)
                    }
                    
                    Text("Temperature on this day across decades")
                        .font(.caption)
                        .foregroundColor(.secondary)
                }
                
                Spacer()
                
                // Unit toggle
                HStack(spacing: 8) {
                    Text("°C")
                        .font(.caption)
                        .foregroundColor(!useFahrenheit ? .primary : .secondary)
                    
                    Toggle("", isOn: $useFahrenheit)
                        .labelsHidden()
                    
                    Text("°F")
                        .font(.caption)
                        .foregroundColor(useFahrenheit ? .primary : .secondary)
                }
            }
        }
        .padding()
        .background(Color.cardBackground)
        .clipShape(RoundedRectangle(cornerRadius: 16))
    }
}

Props / Parameters

data · [ClimateDataPoint] · required

Array of historical temperature data points. Each ClimateDataPoint contains:

• year: The year (e.g., 1980, 1990, 2000)
• temperature: Temperature in Celsius for that year

useFahrenheit · Binding<Bool> · required

Binding to control whether temperatures are displayed in Fahrenheit or Celsius. User can toggle this with the built-in switch.

formatTemp · (Double) -> String · required

Closure that formats temperature values for display. Should handle both Celsius and Fahrenheit formatting.

formatDiff · (Double) -> String · required

Closure that formats temperature differences (e.g., “+2.1°F”). Used for the change summary.

Key Features

Temperature Unit Toggle

iOS-style toggle switch for Celsius/Fahrenheit:

HStack(spacing: 8) {
    Text("°C")
        .font(.caption)
        .foregroundColor(!useFahrenheit ? .primary : .secondary)
    
    Toggle("", isOn: $useFahrenheit)
        .labelsHidden()
    
    Text("°F")
        .font(.caption)
        .foregroundColor(useFahrenheit ? .primary : .secondary)
}

Change Summary

Displays temperature change from baseline year:

private var temperatureChange: Double {
    guard let first = data.first, let last = data.last else { return 0 }
    return last.temperature - first.temperature
}

HStack {
    Text("Change since \(baselineYear)")
        .font(.subheadline)
        .foregroundColor(.secondary)
    
    Spacer()
    
    Text(formatDiff(temperatureChange))
        .font(.title2)
        .fontWeight(.bold)
        .foregroundColor(temperatureChange > 0 ? .red : .blue)
}

Bar Chart (iOS 16+)

Uses Swift Charts framework for modern visualization:

if #available(iOS 16.0, *) {
    Chart(data) { point in
        BarMark(
            x: .value("Year", String(point.year)),
            y: .value("Temp", displayTemperature(point.temperature))
        )
        .foregroundStyle(barColor(for: point))
        .cornerRadius(4)
        .annotation(position: .top) {
            Text(formatTemp(point.temperature))
                .font(.caption2)
                .foregroundColor(.secondary)
        }
    }
    .chartYAxis {
        AxisMarks(position: .leading)
    }
    .frame(height: 180)
}

Color Coding Logic

Bars are colored based on temperature change from baseline:

private func barColor(for point: ClimateDataPoint) -> Color {
    guard let baseline = data.first else { return .gray }
    let diff = point.temperature - baseline.temperature
    
    if diff > 2 {
        return .red
    } else if diff > 0.5 {
        return .orange
    } else if diff < -0.5 {
        return .blue
    } else {
        return .gray
    }
}

• Red: +2°C or more warming
• Orange: +0.5°C to +2°C warming
• Gray: -0.5°C to +0.5°C (neutral)
• Blue: More than -0.5°C cooling

Fallback for iOS 15 and Earlier

Manual bar chart rendering for older iOS versions:

else {
    // Fallback for older iOS
    HStack(alignment: .bottom, spacing: 8) {
        ForEach(data) { point in
            VStack {
                Text(formatTemp(point.temperature))
                    .font(.caption2)
                
                RoundedRectangle(cornerRadius: 4)
                    .fill(barColor(for: point))
                    .frame(height: barHeight(for: point))
                
                Text(String(point.year))
                    .font(.caption2)
            }
        }
    }
    .frame(height: 180)
}

Temperature Conversion

Automatic conversion based on unit preference:

private func displayTemperature(_ celsius: Double) -> Double {
    useFahrenheit ? (celsius * 9 / 5) + 32 : celsius
}

Usage in App

@State private var useFahrenheit = true

ClimateChartView(
    data: [
        ClimateDataPoint(year: 1980, temperature: 18.5),
        ClimateDataPoint(year: 1990, temperature: 19.2),
        ClimateDataPoint(year: 2000, temperature: 19.8),
        ClimateDataPoint(year: 2010, temperature: 20.1),
        ClimateDataPoint(year: 2020, temperature: 20.8),
        ClimateDataPoint(year: 2024, temperature: 21.2)
    ],
    useFahrenheit: $useFahrenheit,
    formatTemp: { temp in
        if useFahrenheit {
            return String(format: "%.1f°F", (temp * 9/5) + 32)
        } else {
            return String(format: "%.1f°C", temp)
        }
    },
    formatDiff: { diff in
        if useFahrenheit {
            return String(format: "%+.1f°F", diff * 9/5)
        } else {
            return String(format: "%+.1f°C", diff)
        }
    }
)

Data Context

The chart visualizes how temperatures on the current calendar date (e.g., March 4th) have changed across different decades, helping users understand local climate trends at a glance.

Requirements

• iOS 16.0+ for Swift Charts support
• Falls back to custom rendering on iOS 15 and earlier

Source Location

BreezeApp/Views/Environmental/ClimateChartView.swift:4