Loli-pop Update ::
I believe I resolved my [Loli-pop] SwiftUI Chart issue with the following steps ::
1. Created a [Struct] to hold the identified [Solar Elevation Y-Axis] value in the application’s [Constant Folder].
2. Created a [State Variable] to [Bind] the chart’s [rawSelectedTimeOfDay].
3. Created a [Function] to return a [Double] from the [Mock Data] for the identified [Calculated Solar Elevation].
4. Created the [Loli-pop] in the [Chart] to display the identified [Calculated Solar Elevation] data.
5. Implemented the [.chartXSelection] modifier to engage the [Drag Gesture].
6. Activated the [.chartXSelection :: .onChange] to identify the [Drag Gesture’s newValue].
7. The application calls the [Function] to return a [Mock Data Double] for the identified [Drag Gesture’s newValue].
8. The [.onChange] transfers the identified [newValue] to a [Constant Folder Struct].
9. The [Loli-pop] retrieves the identified [newValue] from the [Constant Folder Struct].
10. The application formats the [newValue] to the required decimal places.
11. The application displays the [Loli-pop] with each new [Drag Gesture Value].
// MARK: Create the [Struct] to hold the identified [Solar Elevation] in the [Constant Folder].
struct VerifyTheChartSolarElevationYAxisValue {
static var theVerifyTheChartSolarElevationYAxisValue: Double = 0.0
} // End of [struct VerifyTheChartSolarElevationYAxisValue]
// MARK: Prepare the [CONTENT VIEW]
struct SunElevationChartContentView: View {
@State private var rawSelectedTimeOfDay: String? = nil
@State private var overallData = Value.theSunElevationMockData()
@State private var offsetX = 0.0
@State private var offsetY = 0.0
func getYValueForX(xValue: String) -> Double? {
for dataPoint in overallData {
if dataPoint.theRequiredTimeOfDay == xValue {
return dataPoint.theCalculatedElevation
}
}
return nil
} // End of [func getYValueForX(xValue: String) -> Double?]
// MARK: Prepare the [BODY VIEW]
var body: some View {
VStack {
Chart {
ForEach(overallData) { dataPoint in
LineMark(
x: .value("h:m:s", dataPoint.theRequiredTimeOfDay),
y: .value("Elevation", dataPoint.theCalculatedElevation)
) // End of [LineMark]
.interpolationMethod(.catmullRom(alpha: 0))
.foregroundStyle(.yellow)
.lineStyle(StrokeStyle(lineWidth: 10))
.opacity(1.00)
// [Original Chart Format Code]
// MARK: Identify and display the [CHART Loli-pop].
if let rawSelectedTimeOfDay {
RuleMark(x: .value("Selected", rawSelectedTimeOfDay))
// MARK: Set the RuleMark [LINE STYLE].
.foregroundStyle(.teal)
.opacity(0.8)
.lineStyle(.init(lineWidth: 2, miterLimit: 2, dash: [2], dashPhase: 5))
.annotation(position: .top, overflowResolution: .init(x: .fit(to: .chart), y: .disabled)) {
VStack(spacing: 4) {
Text("Solar Elevation")
.font(.system(size: 16, weight: .bold, design: .default))
.foregroundStyle(.white)
// MARK: Retrieve and identify the [SOLAR ELEVATION VALUE] to [FORMAT] from the [Constants Folder].
let solarElevation_Value: Double = VerifyTheChartSolarElevationYAxisValue.theVerifyTheChartSolarElevationYAxisValue
// MARK: Convert the [SOLAR ELEVATION VALUE] to a [STRING].
// MARK: Set the [STRING FORMAT] to display [Four Decimal Places].
let solarElevation_StringValue = String(format: "%.4f", solarElevation_Value)
// MARK: Display the [Converted Double Solar Elevation Text Value] as a [STRING].
Text("\(solarElevation_StringValue)º")
.font(.system(size: 12, weight: .bold, design: .default))
.foregroundStyle(.teal)
// MARK: Show the selected chart [Time of Day].
Text("\(rawSelectedTimeOfDay)")
.font(.system(size: 12, weight: .bold, design: .default))
.foregroundStyle(.orange)
}
.padding(12)
.frame(width: 140, height: 80)
.background(RoundedRectangle(cornerRadius: 4).fill(LinearGradient(gradient: Gradient(colors: [Color(.systemBlue), Color(.black)]), startPoint: .top, endPoint: .bottom)).stroke(.black, lineWidth: 6).multilineTextAlignment(.center))
// MARK: Position the [Loli-pop Display Rectangle] in the [CHART].
.offset(x: offsetX - 0, y: offsetY - (-110))
} // End of [.annotation]
} // End of [if let rawSelectedTimeOfDay]
} // End of [ForEach(overallData) { dataPoint in]
// Set the [Chart Frame].
.frame(width: 1088, height: 660)
.padding(.top, 10)
.padding(.bottom, 4)
.padding(.leading, 4)
.padding(.trailing, 4)
// MARK: Identify the [CHART MODIFIER] to engage the [DRAG GESTURE].
.chartXSelection(value: $rawSelectedTimeOfDay)
// MARK: Activate [.onChange].
.onChange(of: rawSelectedTimeOfDay, { oldValue, newValue in
// MARK: Activate [getYValueForX] function to identify and retrieve the [Solar Elevation].
// MARK: Create a [Default Value] if [rawSelectedTimeOfDay] selection does not exist.
if let theRequiredYAxisValue = getYValueForX(xValue: newValue ?? "00:06:00") {
// MARK: Assign [Solar Elevation] to a [Constant] in the [CONSTANT FOLDER].
VerifyTheChartSolarElevationYAxisValue.theVerifyTheChartSolarElevationYAxisValue = theRequiredYAxisValue
} // End of [if let theRequiredYAxisValue = getYValueForX(xValue: newValue ?? "00:06:00")]
}) // End of [.onChange]
} // End of [Chart]
} // End of [VStack]
} // End of [var body: some View]
} // End of [struct SunElevationChartContentView: View]
Paris ::
Topic:
UI Frameworks
SubTopic:
SwiftUI
Tags: