Compare commits

..

1 Commits

Author SHA1 Message Date
Andras Samu 7853476d86 Add CardView and CardLabel 2020-05-30 18:00:18 +02:00
12 changed files with 110 additions and 140 deletions
@@ -1,19 +1,19 @@
import SwiftUI
struct AnyChartType: ChartType {
private let chartMaker: (ChartType.Data, ChartType.Style) -> AnyView
private let chartMaker: (ChartType.Configuration, ChartType.Style) -> AnyView
init<S: ChartType>(_ type: S) {
self.chartMaker = type.makeTypeErasedBody
}
func makeChart(data: ChartType.Data, style: ChartType.Style) -> AnyView {
self.chartMaker(data, style)
func makeChart(configuration: ChartType.Configuration, style: ChartType.Style) -> AnyView {
self.chartMaker(configuration, style)
}
}
fileprivate extension ChartType {
func makeTypeErasedBody(data: ChartType.Data, style: ChartType.Style) -> AnyView {
AnyView(makeChart(data: data, style: style))
func makeTypeErasedBody(configuration: ChartType.Configuration, style: ChartType.Style) -> AnyView {
AnyView(makeChart(configuration: configuration, style: style))
}
}
@@ -1,9 +0,0 @@
import SwiftUI
public class ChartData: ObservableObject {
@Published public var data: [Double] = []
public init(_ data: [Double]) {
self.data = data
}
}
@@ -4,8 +4,8 @@ import SwiftUI
public protocol ChartType {
associatedtype Body: View
func makeChart(data: Self.Data, style: Self.Style) -> Self.Body
func makeChart(configuration: Self.Configuration, style: Self.Style) -> Self.Body
typealias Data = ChartData
typealias Configuration = ChartTypeConfiguration
typealias Style = ChartStyle
}
@@ -0,0 +1,5 @@
import SwiftUI
public struct ChartTypeConfiguration {
public let data: [Double]
}
+5 -11
View File
@@ -7,21 +7,15 @@ public struct ChartView: View {
@Environment(\.chartType) private var chartType
@Environment(\.chartStyle) private var chartStyle
private var data: ChartData
public init(data: ChartData) {
self.data = data
}
private var configuration: ChartTypeConfiguration
public var body: some View {
self.chartType.makeChart(data: data, style: chartStyle)
self.chartType.makeChart(configuration: configuration, style: chartStyle)
}
}
extension ChartView {
// public init(data: [Double]) {
// self.configuration = ChartTypeConfiguration(data: data)
// }
public init(data: [Double]) {
self.configuration = ChartTypeConfiguration(data: data)
}
}
@@ -1,8 +1,8 @@
import SwiftUI
public struct BarChart: ChartType {
public func makeChart(data: Self.Data, style: Self.Style) -> some View {
BarChartRow(chartData: data, style: style)
public func makeChart(configuration: Self.Configuration, style: Self.Style) -> some View {
BarChartRow(data: configuration.data, style: style)
}
public init() {}
}
@@ -11,17 +11,17 @@ struct BarChart_Previews: PreviewProvider {
static var previews: some View {
Group {
BarChart().makeChart(
data: .init([0]),
configuration: .init(data: [0]),
style: .init(backgroundColor: .white, foregroundColor: ColorGradient.redBlack))
Group {
BarChart().makeChart(
data: .init([1, 2, 3, 5, 1]),
configuration: .init(data: [1, 2, 3, 5, 1]),
style: .init(backgroundColor: .white, foregroundColor: ColorGradient.redBlack))
}.environment(\.colorScheme, .light)
Group {
BarChart().makeChart(
data: .init([1, 2, 3]),
configuration: .init(data: [1, 2, 3]),
style: .init(backgroundColor: .white, foregroundColor: ColorGradient.redBlack))
}.environment(\.colorScheme, .dark)
@@ -1,67 +1,49 @@
import SwiftUI
public struct BarChartCell: View {
var value: Double
var index: Int = 0
var width: Float
var numberOfDataPoints: Int
@State var value: Double
@State var index: Int = 0
@State var width: Float
@State var numberOfDataPoints: Int
var gradientColor: ColorGradient
var touchLocation: CGFloat
var cellWidth: Double {
return Double(width)/(Double(numberOfDataPoints) * 1.5)
}
@State var firstDisplay: Bool = true
public init( value: Double,
index: Int = 0,
width: Float,
numberOfDataPoints: Int,
gradientColor: ColorGradient,
touchLocation: CGFloat) {
self.value = value
self.index = index
self.width = width
self.numberOfDataPoints = numberOfDataPoints
self.gradientColor = gradientColor
self.touchLocation = touchLocation
}
@State var scaleValue: Double = 0
@Binding var touchLocation: CGFloat
public var body: some View {
ZStack {
RoundedRectangle(cornerRadius: 4)
.fill(gradientColor.linearGradient(from: .bottom, to: .top))
}
.frame(width: CGFloat(self.cellWidth))
.scaleEffect(CGSize(width: 1, height: self.firstDisplay ? 0.0 : self.value), anchor: .bottom)
.onAppear {
self.firstDisplay = false
}
.onDisappear {
self.firstDisplay = true
}
.transition(.slide)
.animation(Animation.spring().delay(self.touchLocation < 0 || !firstDisplay ? Double(self.index) * 0.04 : 0))
}
.frame(width: CGFloat(self.cellWidth))
.scaleEffect(CGSize(width: 1, height: self.scaleValue), anchor: .bottom)
.onAppear {
self.scaleValue = self.value
}
.animation(Animation.spring().delay(self.touchLocation < 0 ? Double(self.index) * 0.04 : 0))
}
}
struct BarChartCell_Previews: PreviewProvider {
static var previews: some View {
Group {
BarChartCell(value: 0, width: 50, numberOfDataPoints: 1, gradientColor: ColorGradient.greenRed, touchLocation: .constant(CGFloat()))
Group {
BarChartCell(value: 0, width: 50, numberOfDataPoints: 1, gradientColor: ColorGradient.greenRed, touchLocation: CGFloat())
BarChartCell(value: 1, width: 50, numberOfDataPoints: 1, gradientColor: ColorGradient.greenRed, touchLocation: CGFloat())
BarChartCell(value: 1, width: 50, numberOfDataPoints: 1, gradientColor: ColorGradient.whiteBlack, touchLocation: CGFloat())
BarChartCell(value: 1, width: 50, numberOfDataPoints: 1, gradientColor: ColorGradient(.purple), touchLocation: CGFloat())
BarChartCell(value: 1, width: 50, numberOfDataPoints: 1, gradientColor: ColorGradient.greenRed, touchLocation: .constant(CGFloat()))
BarChartCell(value: 1, width: 50, numberOfDataPoints: 1, gradientColor: ColorGradient.whiteBlack, touchLocation: .constant(CGFloat()))
BarChartCell(value: 1, width: 50, numberOfDataPoints: 1, gradientColor: ColorGradient(.purple), touchLocation: .constant(CGFloat()))
}
Group {
BarChartCell(value: 1, width: 50, numberOfDataPoints: 1, gradientColor: ColorGradient.greenRed, touchLocation: CGFloat())
BarChartCell(value: 1, width: 50, numberOfDataPoints: 1, gradientColor: ColorGradient.whiteBlack, touchLocation: CGFloat())
BarChartCell(value: 1, width: 50, numberOfDataPoints: 1, gradientColor: ColorGradient(.purple), touchLocation: CGFloat())
BarChartCell(value: 1, width: 50, numberOfDataPoints: 1, gradientColor: ColorGradient.greenRed, touchLocation: .constant(CGFloat()))
BarChartCell(value: 1, width: 50, numberOfDataPoints: 1, gradientColor: ColorGradient.whiteBlack, touchLocation: .constant(CGFloat()))
BarChartCell(value: 1, width: 50, numberOfDataPoints: 1, gradientColor: ColorGradient(.purple), touchLocation: .constant(CGFloat()))
}.environment(\.colorScheme, .dark)
}
}
}
@@ -1,7 +1,7 @@
import SwiftUI
public struct BarChartRow: View {
@ObservedObject var chartData: ChartData
@State var data: [Double] = []
@State var touchLocation: CGFloat = -1.0
enum Constant {
@@ -11,7 +11,7 @@ public struct BarChartRow: View {
var style: ChartStyle
var maxValue: Double {
guard let max = chartData.data.max() else {
guard let max = data.max() else {
return 1
}
return max != 0 ? max : 1
@@ -20,18 +20,18 @@ public struct BarChartRow: View {
public var body: some View {
GeometryReader { geometry in
HStack(alignment: .bottom,
spacing: (geometry.frame(in: .local).width - Constant.spacing) / CGFloat(self.chartData.data.count * 3)) {
ForEach(0..<self.chartData.data.count, id: \.self) { index in
BarChartCell(value: self.normalizedValue(index: index),
index: index,
width: Float(geometry.frame(in: .local).width - Constant.spacing),
numberOfDataPoints: self.chartData.data.count,
gradientColor: self.style.foregroundColor.rotate(for: index),
touchLocation: self.touchLocation)
.scaleEffect(self.getScaleSize(touchLocation: self.touchLocation, index: index), anchor: .bottom)
.animation(Animation.easeIn(duration: 0.2))
}
// .drawingGroup()
spacing: (geometry.frame(in: .local).width - Constant.spacing) / CGFloat(self.data.count * 3)) {
ForEach(0..<self.data.count, id: \.self) { index in
BarChartCell(value: self.normalizedValue(index: index),
index: index,
width: Float(geometry.frame(in: .local).width - Constant.spacing),
numberOfDataPoints: self.data.count,
gradientColor: self.style.foregroundColor.rotate(for: index),
touchLocation: self.$touchLocation)
.scaleEffect(self.getScaleSize(touchLocation: self.touchLocation, index: index), anchor: .bottom)
.animation(.spring())
}
}
.padding([.top, .leading, .trailing], 10)
.gesture(DragGesture()
@@ -46,13 +46,12 @@ public struct BarChartRow: View {
}
func normalizedValue(index: Int) -> Double {
print(chartData.data[index])
return Double(chartData.data[index])/Double(maxValue)
return Double(data[index])/Double(maxValue)
}
func getScaleSize(touchLocation: CGFloat, index: Int) -> CGSize {
if touchLocation > CGFloat(index)/CGFloat(chartData.data.count) &&
touchLocation < CGFloat(index+1)/CGFloat(chartData.data.count) {
if touchLocation > CGFloat(index)/CGFloat(self.data.count) &&
touchLocation < CGFloat(index+1)/CGFloat(self.data.count) {
return CGSize(width: 1.4, height: 1.1)
}
return CGSize(width: 1, height: 1)
@@ -60,24 +59,24 @@ public struct BarChartRow: View {
}
//struct BarChartRow_Previews: PreviewProvider {
// static var previews: some View {
// Group {
// BarChartRow(data: [0], style: styleGreenRed)
// Group {
// BarChartRow(data: [1, 2, 3], style: styleGreenRed)
// BarChartRow(data: [1, 2, 3], style: styleGreenRedWhiteBlack)
// }
// Group {
// BarChartRow(data: [1, 2, 3], style: styleGreenRed)
// BarChartRow(data: [1, 2, 3], style: styleGreenRedWhiteBlack)
// }.environment(\.colorScheme, .dark)
// }
// }
//}
//
//private let styleGreenRed = ChartStyle(backgroundColor: .white, foregroundColor: .greenRed)
//
//private let styleGreenRedWhiteBlack = ChartStyle(
// backgroundColor: ColorGradient.init(.white),
// foregroundColor: [ColorGradient.redBlack, ColorGradient.whiteBlack])
struct BarChartRow_Previews: PreviewProvider {
static var previews: some View {
Group {
BarChartRow(data: [0], style: styleGreenRed)
Group {
BarChartRow(data: [1, 2, 3], style: styleGreenRed)
BarChartRow(data: [1, 2, 3], style: styleGreenRedWhiteBlack)
}
Group {
BarChartRow(data: [1, 2, 3], style: styleGreenRed)
BarChartRow(data: [1, 2, 3], style: styleGreenRedWhiteBlack)
}.environment(\.colorScheme, .dark)
}
}
}
private let styleGreenRed = ChartStyle(backgroundColor: .white, foregroundColor: .greenRed)
private let styleGreenRedWhiteBlack = ChartStyle(
backgroundColor: ColorGradient.init(.white),
foregroundColor: [ColorGradient.redBlack, ColorGradient.whiteBlack])
@@ -2,8 +2,7 @@ import SwiftUI
public struct Line: View {
@State var frame: CGRect = .zero
@ObservedObject var chartData: ChartData
@State var data: [Double]
var style: ChartStyle
@State var showIndicator: Bool = false
@@ -12,11 +11,11 @@ public struct Line: View {
@State var showBackground: Bool = true
var curvedLines: Bool = true
var step: CGPoint {
return CGPoint.getStep(frame: frame, data: chartData.data)
return CGPoint.getStep(frame: frame, data: data)
}
var path: Path {
let points = chartData.data
let points = data
if curvedLines {
return Path.quadCurvedPathWithPoints(points: points,
@@ -28,7 +27,7 @@ public struct Line: View {
}
var closedPath: Path {
let points = chartData.data
let points = data
if curvedLines {
return Path.quadClosedCurvedPathWithPoints(points: points,
@@ -110,8 +109,8 @@ extension Line {
struct Line_Previews: PreviewProvider {
static var previews: some View {
Group {
Line(chartData: ChartData([8, 23, 32, 7, 23, 43]), style: blackLineStyle)
Line(chartData: ChartData([8, 23, 32, 7, 23, 43]), style: redLineStyle)
Line(data: [1, 2, 3, 1, 2, 5, 7], style: blackLineStyle)
Line(data: [1, 2, 3, 1, 2, 5, 7], style: redLineStyle)
}
}
}
@@ -1,8 +1,8 @@
import SwiftUI
public struct LineChart: ChartType {
public func makeChart(data: Self.Data, style: Self.Style) -> some View {
Line(chartData: data, style: style)
public func makeChart(configuration: Self.Configuration, style: Self.Style) -> some View {
Line(data: configuration.data, style: style)
}
public init() {}
@@ -12,17 +12,17 @@ struct LineChart_Previews: PreviewProvider {
static var previews: some View {
Group {
LineChart().makeChart(
data: .init([0]),
configuration: .init(data: [0]),
style: .init(backgroundColor: .white, foregroundColor: ColorGradient(.black)))
Group {
LineChart().makeChart(
data: .init([1, 2, 3, 5, 1]),
configuration: .init(data: [1, 2, 3, 5, 1]),
style: .init(backgroundColor: .white, foregroundColor: ColorGradient(.black)))
}.environment(\.colorScheme, .light)
Group {
LineChart().makeChart(
data: .init([1, 2, 3]),
configuration: .init(data: [1, 2, 3]),
style: .init(backgroundColor: .white, foregroundColor: ColorGradient.redBlack))
}.environment(\.colorScheme, .dark)
@@ -8,8 +8,8 @@
import SwiftUI
public struct PieChart: ChartType {
public func makeChart(data: Self.Data, style: Self.Style) -> some View {
PieChartRow(chartData: data, style: style)
public func makeChart(configuration: Self.Configuration, style: Self.Style) -> some View {
PieChartRow(data: configuration.data, style: style)
}
public init() {}
}
@@ -18,30 +18,30 @@ struct PieChart_Previews: PreviewProvider {
static var previews: some View {
Group {
PieChart().makeChart(
data: .init([0]),
configuration: .init(data: [0]),
style: styleOneColor)
Group {
PieChart().makeChart(
data: .init([56, 78, 53, 65, 54]),
configuration: .init(data: [56, 78, 53, 65, 54]),
style: styleOneColor)
PieChart().makeChart(
data: .init([56, 78, 53, 65, 54]),
configuration: .init(data: [56, 78, 53, 65, 54]),
style: styleTwoColor)
PieChart().makeChart(
data: .init([1, 1, 1, 1, 1, 1]),
configuration: .init(data: [1, 1, 1, 1, 1, 1]),
style: trivialPursuit)
}.environment(\.colorScheme, .light)
Group {
PieChart().makeChart(
data: .init([56, 78, 53, 65, 54]),
configuration: .init(data: [56, 78, 53, 65, 54]),
style: styleOneColor)
PieChart().makeChart(
data: .init([56, 78, 53, 65, 54]),
configuration: .init(data: [56, 78, 53, 65, 54]),
style: styleTwoColor)
PieChart().makeChart(
data: .init([1, 1, 1, 1, 1, 1]),
configuration: .init(data: [1, 1, 1, 1, 1, 1]),
style: trivialPursuit)
}.environment(\.colorScheme, .dark)
@@ -8,16 +8,16 @@
import SwiftUI
public struct PieChartRow: View {
@ObservedObject var chartData: ChartData
var data: [Double]
var style: ChartStyle
var slices: [PieSlice] {
var tempSlices: [PieSlice] = []
var lastEndDeg: Double = 0
let maxValue: Double = chartData.data.reduce(0, +)
let maxValue: Double = data.reduce(0, +)
for slice in chartData.data {
for slice in data {
let normalized: Double = Double(slice) / (maxValue == 0 ? 1 : maxValue)
let startDeg = lastEndDeg
let endDeg = lastEndDeg + (normalized * 360)
@@ -53,17 +53,17 @@ struct PieChartRow_Previews: PreviewProvider {
Group {
//Empty Array - Default Colors.OrangeStart
PieChartRow(
chartData: ChartData([8, 23, 32, 7, 23, 43]),
data: [8, 23, 32, 7, 23, 43],
style: defaultMultiColorChartStyle)
.frame(width: 100, height: 100)
PieChartRow(
chartData: ChartData([8, 23, 32, 7, 23, 43]),
data: [8, 23, 32, 7, 23, 43],
style: multiColorChartStyle)
.frame(width: 100, height: 100)
PieChartRow(
chartData: ChartData([8, 23, 32, 7, 23, 43]),
data: [0],
style: multiColorChartStyle)
.frame(width: 100, height: 100)