Как управлять «диапазоном» оси X в диаграммах SwiftUI? ⇐ IOS

[Anonymous]

Моя диаграмма
Диаграмма Apple
Мне хотелось бы так плавно управлять временным диапазоном между другими значениями на диаграмме, как, например, в приложение iOS «Здоровье». Как изменить диапазон диаграммы, например, между вид с 3 ртами и вид с 9 ртами?
Это мой код:

Код: Выделить всё

import SwiftUI
import Charts

struct ChartsV: View {
@State private var isSheetPresented = false
@State var contentHasScrolled = false
@ObservedObject var dataStore: DataStoreVM

@State private var type: Int = 0

init(dataStore: DataStoreVM) {
self.dataStore = dataStore
let navBarAppearance = UINavigationBarAppearance()
UINavigationBar.appearance().standardAppearance = navBarAppearance
}

var body: some View {
NavigationView {
ZStack {
LinearGradient(
gradient: Gradient(stops: [
.init(color: Color(uiColor: .systemBackground), location: 0.1),
.init(color: colorForType(chartType: type), location: 0.7),
.init(color: Color(uiColor: .systemBackground), location: 1.2)
]),
startPoint: .top,
endPoint: .bottom
)
.animation(.easeInOut(duration: 0.6), value: type)
.mask(
LinearGradient(
gradient: Gradient(stops: [
.init(color: Color.black.opacity(0.3), location: -0.5),
.init(color: Color.black.opacity(0.5), location: 0.5),
.init(color: Color.black.opacity(0.3), location: 1.5)
]),
startPoint: .leading,
endPoint: .trailing
)
)
.edgesIgnoringSafeArea(.all)

VStack {
Text("Wykresy")
.foregroundColor(.primary)
.opacity(0.5)
.fontWeight(.bold)
.padding()

Chart(dataStore.entries) { entry in
LineMark(
x: .value("Month", entry.date),
y: .value("Total", valueForType(entry: entry, chartType: type))
)
.foregroundStyle(colorForType(chartType: type))
.lineStyle(StrokeStyle(lineWidth: 8, lineCap: .round))
.interpolationMethod(.monotone)
}
.chartScrollableAxes(.horizontal)
.chartYScale(domain: getYMin()...getYMax())
.frame(height: 200)
.chartXAxis {
AxisMarks(position: .bottom, values: .stride(by: .month)) { value in
AxisValueLabel(format: .dateTime.month(.abbreviated))
AxisTick()
AxisGridLine()
}
}
.chartYAxis {

}
.animation(.timingCurve(0.2, 0.5, 0, 1, duration: 0.8), value: type)
Picker("Typ", selection: $type) {
Image(systemName: "dollarsign").tag(0)
Image(systemName: "fuelpump.fill").tag(1)
Image(systemName: "road.lanes").tag(2)
Image(systemName: "bubbles.and.sparkles.fill").tag(3)
}
.pickerStyle(.segmented)
.padding()
}
.background(.thinMaterial)
.cornerRadius(20)
.shadow(color: .black.opacity(0.1), radius: 10, x: 0, y: 10)
.padding([.leading, .bottom, .trailing])

NavigationBarV(backgroundColor: Color(UIColor.bgGradient1), title: "Wykresy", back: "Podsumowanie", contentHasScrolled: $contentHasScrolled)

VStack {
Spacer()
HStack {
Spacer()
BottomButtonV(bottomButton: BottomButtonM(icon: "plus", color:  Color.primary)) {
isSheetPresented.toggle()
}
}
.padding()
}

VStack {
Spacer()
Picker("Typ", selection: $type) {
Text("weeks").tag(0)
Text("months").tag(1)
}
.pickerStyle(.segmented)
.padding(.horizontal, 80)
}
}
.sheet(isPresented: $isSheetPresented) {
NewEntryV(dataStore: dataStore) {
isSheetPresented = false
}
}
}
}

private func getYMax() -> Double {
let maxValue = dataStore.entries.map { valueForType(entry: $0, chartType: type) }.max() ?? 1
return max(maxValue, 1) * 1.1 // Możesz również dodać wartość do stałego minimum
}

private func getYMin() -> Double {
let values = dataStore.entries.map { valueForType(entry: $0, chartType: type) }
let maxValue = values.max() ?? 1

// Jeśli wszystkie wartości są zerowe
if values.allSatisfy({ $0 == 0 }) {
return -0.1 // Ustal dolną granicę na -0.1
} else {
// Ustal dolną granicę na 5% górnej wartości
return max(0, maxValue * 0.95) * -0.1
}
}

private func valueForType(entry: Entry, chartType: Int) -> Double {
switch chartType {
case 0: return entry.value ?? 0
case 1: return entry.quantity ?? 0
case 2: return entry.trip ?? 0
case 3: return entry.quantity ?? 0
default: return 0
}
}

private func colorForType(chartType: Int) -> Color {
switch chartType {
case 0: return .orange
case 1: return .green
case 2: return .blue
case 3: return .purple
default: return .primary
}
}
}

Мне бы хотелось, чтобы на графике отображались разные данные в зависимости от выбранного сегмента (первого сборщика): расходы, расход топлива, пройденное расстояние и количество стирок. Каждая точка на каждом графике должна представлять собой сумму значений данного типа за каждую неделю в случае недельного просмотра и за каждый месяц в случае месячного просмотра. Однако не это самое главное. В основном хотелось бы добиться плавного переключения между диапазонами оси X. Оно должно плавно сужаться и расширяться в зависимости от выбранного представления, чтобы по ширине представления отображался диапазон около 3 месяцев, а деление выполнялось относительно первого дня недели (например, 4 ноября, 11 ноября, 18 ноября, 25 ноября, 2 декабря) или около 9 месяцев, а в разделе отображаются только названия месяцев.

Подробнее здесь: https://stackoverflow.com/questions/791 ... tui-charts