Skip to content

Commit

Permalink
v0.9.3: bug fixes.
Browse files Browse the repository at this point in the history 
Bug fixes: in the line chart, user interaction (provided it is switched on) works again if showAppearAnimation set to false.
Refactored view appear logic if showAppearAnimation set to false
  • Loading branch information
@DominikButz
DominikButz committed Aug 18, 2022
1 parent 7f080fd commit b94c3d3
Show file tree
Hide file tree
Showing 6 changed files with 49 additions and 31 deletions.
3 changes: 3 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -255,6 +255,9 @@ struct RingChartAndDetailPieChartExample: View {

## Change log

#### [Version 0.9.3](https://github.com/DominikButz/SwiftUIGraphs/releases/tag/0.9.3)
Bug fix: in the line chart, user interaction (provided it is switched on) works again if showAppearAnimation set to false

#### [Version 0.9.2](https://github.com/DominikButz/SwiftUIGraphs/releases/tag/0.9.2)
Added showAppearAnimation parameter to settings of DYLineChartView and DYBarChartView. If it is set to false, the line, line gradient (if any) and the bars will appear instantly without any transition animation.

Expand Down
42 changes: 17 additions & 25 deletions Sources/SwiftUIGraphs/Views/Line Chart/DYLineChartView.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ public struct DYLineChartView: View, DYGridChart {
@State private var isSelected: Bool = false // Is the user touching the graph
@State private var lineEnd: CGFloat = 0 // for line animation
@State private var showLineSegments: Bool = false
@State private var showWithAnimation: Bool = false
@State private var showSupplementaryViews: Bool = false

var chartFrameHeight: CGFloat?
var labelView:((DYDataPoint)->AnyView?)?
Expand Down Expand Up @@ -114,21 +114,21 @@ public struct DYLineChartView: View, DYGridChart {
}

if let _ = self.colorPerLineSegment {
self.lineSegments()
self.lineSegments()
} else {
self.line()
}


if self.showWithAnimation {
if self.showSupplementaryViews || self.settings.showAppearAnimation == false {
Group {
if (self.settings as! DYLineChartSettings).showGradient {
self.gradient()
}

self.selectedDataPointAxisLines() // horizontal and/ or vertical line emanating from selected marker point
.transition(AnyTransition.opacity.animation(Animation.easeIn(duration: 0.8)))
self.selectedDataPointAxisLines()// horizontal and/or vertical line emerging from selected marker point


if (self.settings as! DYLineChartSettings).showPointMarkers {
self.points()
}
Expand All @@ -137,7 +137,7 @@ public struct DYLineChartView: View, DYGridChart {

self.addUserInteraction()

}.transition(AnyTransition.opacity.animation(Animation.easeIn(duration: self.settings.showAppearAnimation ? 0.8 : 0)))
}.transition(AnyTransition.opacity)

}

Expand Down Expand Up @@ -171,11 +171,8 @@ public struct DYLineChartView: View, DYGridChart {
}

private func showChartContent() {
print("line end \(lineEnd)")

guard self.settings.showAppearAnimation else {
self.lineEnd = 1
self.showLineSegments = true
self.showWithAnimation = true
return

}
Expand All @@ -185,14 +182,13 @@ public struct DYLineChartView: View, DYGridChart {
self.showLineSegments = true // for different color line segments
}
DispatchQueue.main.asyncAfter(deadline: .now() + (self.settings as! DYLineChartSettings).lineAnimationDuration) {
self.showWithAnimation = true
withAnimation(.easeIn) {
self.showSupplementaryViews = true
}
}
}

//MARK: Sub-Views




private func xAxisView()-> some View {

Expand All @@ -214,10 +210,7 @@ public struct DYLineChartView: View, DYGridChart {


}
//



private func xAxisIntervalLabelViewFor(value:Double, totalWidth: CGFloat)-> some View {
Text(self.xValueConverter(value)).font(.system(size:(settings as! DYLineChartSettings).xAxisSettings.xAxisFontSize)).position(x: self.settings.lateralPadding.leading + self.convertToXCoordinate(value: value, width: totalWidth), y: 10)
}
Expand Down Expand Up @@ -276,7 +269,6 @@ public struct DYLineChartView: View, DYGridChart {
.foregroundColor(.secondary)
}


}
}

Expand All @@ -285,7 +277,7 @@ public struct DYLineChartView: View, DYGridChart {
Group {
if self.dataPoints.count >= 2 {
self.pathFor(width: geo.size.width - marginSum, height: geo.size.height, closeShape: false)
.trim(from: 0, to: self.lineEnd)
.trim(from: 0, to: self.settings.showAppearAnimation ? self.lineEnd : 1)
.stroke(style: (self.settings as! DYLineChartSettings).lineStrokeStyle)
.foregroundColor((self.settings as! DYLineChartSettings).lineColor)
.shadow(color: (self.settings as! DYLineChartSettings).lineDropShadow?.color ?? .clear, radius: (self.settings as! DYLineChartSettings).lineDropShadow?.radius ?? 0, x: (self.settings as! DYLineChartSettings).lineDropShadow?.x ?? 0, y: (self.settings as! DYLineChartSettings).lineDropShadow?.y ?? 0)
Expand All @@ -310,13 +302,13 @@ public struct DYLineChartView: View, DYGridChart {
}
.stroke(style: (self.settings as! DYLineChartSettings).lineStrokeStyle)
.foregroundColor(self.colorPerLineSegment!(dataPoints[index]))


}.mask(lineAnimationMaskingView(width:geo.size.width))

}

}
}
.shadow(color: (self.settings as! DYLineChartSettings).lineDropShadow?.color ?? .clear, radius: (self.settings as! DYLineChartSettings).lineDropShadow?.radius ?? 0, x: (self.settings as! DYLineChartSettings).lineDropShadow?.x ?? 0, y: (self.settings as! DYLineChartSettings).lineDropShadow?.y ?? 0)
.mask(lineAnimationMaskingView(width:geo.size.width))

}

Expand All @@ -325,7 +317,7 @@ public struct DYLineChartView: View, DYGridChart {
/// for line drawing animation if line composed of several paths in separate colours
private func lineAnimationMaskingView(width: CGFloat)->some View {
HStack {
Rectangle().fill(Color.white.opacity(0.5)).frame(width: self.showLineSegments ? width : 0, alignment: .trailing)
Rectangle().fill(Color.white.opacity(0.5)).frame(width: self.showLineSegments || self.settings.showAppearAnimation == false ? width : 0, alignment: .trailing)
Spacer()
}
}
Expand Down Expand Up @@ -508,7 +500,7 @@ public struct DYLineChartView: View, DYGridChart {
.offset(x: isSelected ? lineOffset : settings.lateralPadding.leading + self.convertToXCoordinate(value: dataPoints[selectedIndex].xValue, width: width), y: 0)
.animation(Animation.spring().speed(4))

if self.settings.allowUserInteraction && self.showWithAnimation {
if self.settings.allowUserInteraction {
Color.white.opacity(0.1)
.gesture(
DragGesture(minimumDistance: 0)
Expand Down
9 changes: 7 additions & 2 deletions SwiftUIGraphsExample/SwiftUIGraphsExample/BasicBarChartExample.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ import SwiftUIGraphs

struct BasicBarChartExample: View {
@State var selectedDataIndex: Int = 0
let exampleData = DYDataPoint.exampleData1

let exampleData = DYDataPoint.exampleData1.sorted(by: {$0.xValue < $1.xValue})

var body: some View {

Expand Down Expand Up @@ -47,7 +48,11 @@ struct BasicBarChartExample: View {
let yValue = dataPoint.yValue
let formatter = NumberFormatter()
formatter.maximumFractionDigits = 1
return Text(formatter.string(for: yValue) ?? "").font(.caption).eraseToAnyView()
var color: Color?
if let index = self.exampleData.firstIndex(where: {$0.id == dataPoint.id}), index == self.selectedDataIndex {
color = .green
}
return Text(formatter.string(for: yValue) ?? "").font(.caption).foregroundColor(color).eraseToAnyView()
}

func gradientPerBar(_ dataPoint: DYDataPoint)->LinearGradient {
Expand Down
7 changes: 6 additions & 1 deletion SwiftUIGraphsExample/SwiftUIGraphsExample/BasicPieChartExample.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ struct BasicPieChartExample: View {

@StateObject var viewModel = BasicPieChartViewModel()
@Namespace var animationNamespace

@State private var pieScale:CGSize = .zero

var body: some View {

Expand Down Expand Up @@ -51,11 +51,16 @@ struct BasicPieChartExample: View {
}, animationNamespace: animationNamespace, settings: DYPieChartSettings(minimumFractionForSliceLabelOffset: 0.11, allowUserInteraction: true))
.background(Circle().fill(Color(.systemBackground))
.shadow(radius: 8))
.scaleEffect(self.pieScale)
.padding(10)

DYFractionChartLegendView(data: viewModel.data, font: UIDevice.current.userInterfaceIdiom == .pad ? .callout : .caption, textColor: .white).frame(width: 250, height: 250).padding(10).infoBoxBackground().padding(10)


}.onAppear {
withAnimation(.spring()) {
self.pieScale = CGSize(width: 1, height: 1)
}
}
}

Expand Down
2 changes: 1 addition & 1 deletion SwiftUIGraphsExample/SwiftUIGraphsExample/ContentView.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import SwiftUIGraphs
struct ContentView: View {

@State private var linkActive: Bool = true

var body: some View {

NavigationView {
Expand Down
17 changes: 15 additions & 2 deletions SwiftUIGraphsExample/SwiftUIGraphsExample/CustomYAxisIntervalExampleLineChart.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@ struct CustomYAxisIntervalExampleLineChart: View {
return Date(timeIntervalSinceReferenceDate: xValue).toString(format:"dd-MM")

}, labelView: nil, yValueConverter: { (yValue) -> String in
return TimeInterval(yValue).toString() ?? ""
}, colorPerPoint: nil, colorPerLineSegment: nil, chartFrameHeight: proxy.size.height > proxy.size.width ? proxy.size.height * 0.4 : proxy.size.height * 0.65, settings: DYLineChartSettings(lineStrokeStyle: StrokeStyle(lineWidth: 2, lineCap: .round, lineJoin: .round, miterLimit: 80, dash: [], dashPhase: 0), lineColor: .blue, showAppearAnimation: true, showGradient: true, gradient: LinearGradient(gradient: Gradient(colors: [.blue.opacity(0.7), Color.white.opacity(0.6)]), startPoint: .top, endPoint: .bottom), gradientDropShadow: Shadow(color: .gray, radius: 7, x: -7, y: -7), lateralPadding: (0, 0), pointColor: .blue, selectorLineColor: .blue, selectorLinePointColor: .blue, yAxisSettings: YAxisSettings(showYAxis: true, yAxisPosition: .trailing, yAxisViewWidth: self.yAxisWidth, showYAxisDataPointLines: false, showYAxisSelectedDataPointLine: true, yAxisFontSize: fontSize, yAxisMinMaxOverride: (min: 0, max: Double(Int(exampleData.map({$0.yValue}).max() ?? 0).nearest(multipleOf: 1800, up: true))), yAxisIntervalOverride: 1800), xAxisSettings: DYLineChartXAxisSettings(showXAxis: true, showXAxisDataPointLines: false, showXAxisSelectedDataPointLine: true, xAxisInterval: 604800, xAxisFontSize: fontSize))) // 604800 seconds per week
return TimeInterval(yValue).toString() ?? "" //{ dataPoint in self.dataPointSegmentColor(dataPoint: dataPoint)}
}, colorPerPoint: nil, colorPerLineSegment: nil, chartFrameHeight: proxy.size.height > proxy.size.width ? proxy.size.height * 0.4 : proxy.size.height * 0.65, settings: lineChartSettings) // 604800 seconds per week
// Button {
// let yValue = Int.random(in: 6000 ..< 12000)
// let xValues = self.exampleData.map{$0.xValue}
Expand All @@ -51,6 +51,19 @@ struct CustomYAxisIntervalExampleLineChart: View {
.navigationTitle("Workout Time Per Week")
}
}

var lineChartSettings: DYLineChartSettings {
DYLineChartSettings(lineStrokeStyle: StrokeStyle(lineWidth: 2, lineCap: .round, lineJoin: .round, miterLimit: 80, dash: [], dashPhase: 0), lineColor: .blue, showAppearAnimation: true, showGradient: true, gradient: LinearGradient(gradient: Gradient(colors: [.blue.opacity(0.7), Color.white.opacity(0.6)]), startPoint: .top, endPoint: .bottom), gradientDropShadow: Shadow(color: .gray, radius: 7, x: -7, y: -7), lateralPadding: (0, 0), pointColor: .blue, selectorLineColor: .blue, selectorLinePointColor: .blue, allowUserInteraction: true, yAxisSettings: yAxisSettings, xAxisSettings: xAxisSettings)
}

var xAxisSettings: DYLineChartXAxisSettings {
DYLineChartXAxisSettings(showXAxis: true, showXAxisDataPointLines: false, showXAxisSelectedDataPointLine: true, xAxisInterval: 604800, xAxisFontSize: fontSize)
}

var yAxisSettings: YAxisSettings {
YAxisSettings(showYAxis: true, yAxisPosition: .trailing, yAxisViewWidth: self.yAxisWidth, showYAxisDataPointLines: false, showYAxisSelectedDataPointLine: true, yAxisFontSize: fontSize, yAxisMinMaxOverride: (min: 0, max: Double(Int(exampleData.map({$0.yValue}).max() ?? 0).nearest(multipleOf: 1800, up: true))), yAxisIntervalOverride: 1800)
}

var fontSize: CGFloat {
UIDevice.current.userInterfaceIdiom == .phone ? 8 : 10
}
Expand Down

0 comments on commit b94c3d3

Please sign in to comment.