If you haven't tried it yourself, here is a short video demonstrating it:

Using sound to describe a chart for accessibility reasons seems to be a great idea and because Apple has put so much effort into it, it seems like people really benefit from that!
Charts most often describe a time-value relationship that is otherwise really hard to put into words. Why should disabled people be excluded from that?

Unfortunately there is no public API from Apple that enables developers to implement it in their apps (yet). What's more, there seems to be no open source library that fills the gap (yet).

This is where my small new side project comes in:

The usage is rather simple:

private func playAudiograph() {
    audiograph.play(graphContent: points)
}

Audiograph can play the content that is visually displayed by the chart. The developer just needs to invoke the play method, passing an array of CGPoint that is already used to draw the UI.
All logic that's left is to decide when to play the Audiograph.

In order to help for that, Audiograph provides a pre-configured UIAccessibilityCustomAction for the developer to add to the chart view.

accessibilityCustomActions = [audiograph.createCustomAccessibilityAction(for: self)]

This is what it looks like in action:

You can read more on that project at GitHub.

When your app draws a chart in any way, please give it a try. Charts should not be a limited experience to those without impairments.

If you have any ideas for improvement please contact me 🙂

1. Loading data should be performed in the background. Thus the data is not immediately available to us. It can even come from a database request or via network.
2. The UI should reload as soon as data is available.
3. Changes the user has made must be saved so that the model layer is always persisted.
4. However, the file system should not be asked to write a file every time the user interacts. Give them a little time until writes are made. That's called debouncing.

Let's Go!

In order to create a sample project we start by defining our very basic model:

struct Model: Codable {
    var content: [Element]
}

struct Element: Codable, Identifiable {
    let id = UUID()
    let name: String
}

Now it is a great time to care about a class that saves an object to disk and is able to read it from there. Let's call it PersistanceController. When loading data, it calls a completion handler to deliver that data:

class PersistanceController<T: Codable> {
...

func loadData(for filename: String, fileExtension: String, defaultValue: T, completion: @escaping ((T) -> Void)) {
        let fileManager = FileManager()
        let dataURL = pathToSavedDataInSharedContainer(forName: filename, fileExtension: fileExtension)
        if fileManager.fileExists(atPath: dataURL.path) {
            let decoder = PropertyListDecoder()

            queue.async(flags: .barrier) {
                guard let data = try? Data(contentsOf: dataURL), let decoded = try? decoder.decode(T.self, from: data) else {
                    DispatchQueue.main.async {
                        completion(defaultValue)
                    }
                    return
                }
                DispatchQueue.main.async {
                    completion(decoded)
                }
            }
        }
        else {
            completion(defaultValue)
        }
    }
}

For writing data we define our function as follows:

private func save(_ object: T, fileName: String, fileExtension: String = "plist", completionHandler: (() -> Void)? ) {
        let fileManager = FileManager()
        let fileURL = pathToSavedDataInSharedContainer(forName: fileName, fileExtension: fileExtension)
        if !fileManager.fileExists(atPath: fileURL.path) {
            // Directory needs to be created first.
            try? fileManager.createDirectory(atPath: applicationDataDirectory.path, withIntermediateDirectories: true, attributes: nil)
        }

        let encoder = PropertyListEncoder()
        queue.async(flags: .barrier) {
            defer {
                DispatchQueue.main.async(execute: completionHandler ?? {})
            }
            guard let data = try? encoder.encode(object) else {
                return
            }
            try? data.write(to: fileURL, options: [.atomic])
        }
    }

Those functions can potentially do whetever they want them to do as long as they save and restore the data.

To make our lives easier when it comes to storing updated data we introduce a Subscriber. New values are passed in through whatever publisher this subscriber is connected to (we'll cover that later). Errors are not handled in this simple example.

// Should be used to trigger a write request.
 var writeSubscriber: Subscribers.Sink<T, Never>!

private func setupSubscriber() {
        writeSubscriber = Subscribers.Sink(receiveCompletion: nil, receiveValue: { (value) in
            self.save(value, fileName: self.filename) {
            // No error handling here.
                print("Saved")
            }
        })
    }

Now we have

• a way to load data from disk asynchronously. The data is received in a completion block.
• a way to save data by passing it to a subscriber.

We continue making our lives easier by introducing a PropertyWrapper that encapsulates all of the logic above:

@propertyWrapper
class Storing<Value: Codable>: ObservableObject {
    private var value: Value?
    private let persistanceController: PersistanceController<Value>
    private let filename: String
    private let defaultValue: Value

    let objectWillChange = PassthroughSubject<Value, Never>()
    private let writePublisher = PassthroughSubject<Value, Never>()

    init(filename: String, defaultValue: Value) {
        self.filename = filename
        self.defaultValue = defaultValue
        persistanceController = PersistanceController(filename: filename)
        setupPublishers()

        persistanceController.loadData(for: filename, fileExtension: "plist", defaultValue: defaultValue) { loaded in
            print("Loaded")
            // Foreward the new data into the publisher
            self.objectWillChange.send(loaded)
            self.value = loaded
        }
    }

    private func setupPublishers() {

        // Connect write publisher to persistance controller's receiving subscriber that will write the data for us
        writePublisher.debounce(for: .seconds(1.5), scheduler: RunLoop.main).receive(subscriber: persistanceController.writeSubscriber)
    }

    var wrappedValue: Value {
        get {
            value ?? defaultValue
        }
        set {
            objectWillChange.send(newValue)
            value = newValue

            writePublisher.send(newValue)
        }
    }
}

The property wrapper is initialized with a filename and a default value. As soon as loading the file is completed the publisher will pass the new value along to its subscribers. When the wrapped value is mutated, the writePublisher is asked to send the new value.

The function setupPublishers connects the publisher with the writeSubscriber of the persistance controller. We also include a debounce so that not every mutation is written to disk immediately. Upon mutation it waits 1.5 seconds until the file system should process the new data.

Now we can

• use the property wrapper to store and load any Codable.
• use the wrapped value either directly or use the publisher to add a subscriber to it. Then we'll be notified about events such as mutations or the initial loading.

Now to the view

In this simple example we just want display the content in a list. Before we get to the declaration of the view we need to instantiate our model.

SwiftUI is still in beta so unfortunately we can not use the property wrapper directly as source for our list like this

// Does not compile for unkown reason:
@Storing(filename: "TrackList", defaultValue: Model(content: [])) var model: Model

also wrapping it inside another wrapper does not work:

@ObjectBinding @Storing(filename: "TrackList", defaultValue: Model(content: [])) var model: Model

Therefore we fall back to creating a model wrapper class (it needs to be a class since @ObjectBinding demands so). That wrapper receives changes from @Storing's publisher and forewards it to its own publisher:

class ModelWrapper: ObservableObject {
    @Storing(filename: "Animals", defaultValue: Model(content: [])) var model: Model
    let objectWillChange = PassthroughSubject<Model, Never>()
        init() {
            let intermediateSubsriber = Subscribers.Sink<Model, Never>(receiveCompletion: { (completion) in
            }) { (value) in
                self.objectWillChange.send(value)
            }
            _model.objectWillChange.receive(subscriber: intermediateSubsriber)
        }
}

In doing so we can finally wire up the model layer with our view:

struct ContentView : View {
    @ObservedObject var modelWrapper: ModelWrapper = .init()

    var body: some View {
        NavigationView {
            List(modelWrapper.model.content) { element in
                Text("\(element.name)")
            }
            .navigationBarTitle(Text("Animals"))
                .navigationBarItems(leading: Button(action: {

                    // We can access the property directly, everything else is done for us automatically.
                    self.modelWrapper.model.content.append( Element.generateMock())

                }, label: {
                    Text("Add more")
                })
                    , trailing: Button(action: {
                        self.modelWrapper.model.content.removeAll()
                    }, label: {
                        Text("Remove All")
                    }))
        }
    }
}

Now our list is populated by data that is loaded from disk asynchronously. When we press a button the model gets updated and the new data is written do disk automatically. When the user presses one buttons frequently it debounces the writes until there is a short brake.

The project still has a lot room for improvements but I wanted to make it simple.

If you want to take a look at the very basic project we build, you can download it here.

If you have any feedback or know how to avoid that extra ModelWrapper please let me know! 😊

Analysis 🧐

The chart smoothly transitions between data from one day (1T) to five days (5T) to one month (1M) to half a year (6M) to a year (1J) to five years (5Y). Whilst doing so, a dashed baseline is updated to always mark the first entry of the selected range. When the rightmost point is below that baseline the chart is colored in red. It becomes green otherwise.

When you follow a point on the graph you see that some points just move up or down whilst other also move horizontally.

Also please notice the timing of the animation. It moves not linearly but has a quite extensive easing on both ends.

Here, I zoomed to the transition from a month to a year. At first I assumed that this transition would move the current month to the right end of the year while scaling it down to become a twelth of the width. To my surprise I recognized that the transform moves to the opposite direction and that still confuses me. Let's see if I can fix that in my replicated version 🙃

My intuition says that a CABAsicAnimation between two CGPaths combined with a custom timing function might be the key to this transition.

Getting mock data 💾

A nice demo can be done by using random data and that is where I actually started. Soon I found out that it becomes much more appealing when real data is involved so I downloaded historically data about the DAX from Yahoo. The CSV can then be parsed like:

struct DataStore {
    private let rawData: [StockData]

    init(contentsOfCSV input: String) {
            let lines = input.components(separatedBy: .newlines)
            var resut = [StockData]()
            for line in lines {
                let components = line.components(separatedBy: ",")
                // StockData simply contains the fields defined by the CSV. We actually only need `Close`.
                if let data = StockData(from: components) {
                    resut.append(data)
                }
            }
            // Reverse the input, more on that later.
            rawData = resut.reversed()
        }
}

After reading the historical data we need to split it in order to come up with defined ranges of time (last five days, last month, last six months, last year and last five years):

lazy var month: [StockData] = {
        var result = [StockData]()

        guard let firstDate = rawData.first?.date else { return result }
        guard let deadline = Calendar.current.date(byAdding: .month, value: -1, to: firstDate)?.endOfDay else { return result }
        // Get every element whose date is before or on the same date as the deadline.
        result = rawData.filter( { $0.date > deadline } )
        return result
}()
// Make use of a handy extension:
extension Date {
    var startOfDay: Date {
        return Calendar.current.startOfDay(for: self)
    }
    var endOfDay: Date {
        var components = DateComponents()
        components.day = 1
        components.second = -1
        return Calendar.current.date(byAdding: components, to: startOfDay)!
    }
}

Drawing a chart 📈

Drawing a chart is mainly calculating points in respect to the frame size of a view. Once we have scaled the points so that the minimum and maximum all fit, we can combine the points with a path and a chart will evolve. So let's start with a CAShapeLayer where we are going to draw the chart on:

class ChartView: UIView {
private let graphLayer: CAShapeLayer = {
        let layer = CAShapeLayer()
        layer.name = "GraphLayer"
        layer.strokeColor = UIColor.red.cgColor
        layer.fillColor = UIColor.clear.cgColor
        layer.lineWidth = 1
        layer.lineJoin = .bevel
        layer.isGeometryFlipped = true

        return layer
    }()

override func layoutSubviews() {
        super.layoutSubviews()
        graphLayer.frame = bounds
}
}

The shape layer is added as sublayer during initialization. isGeometryFlipped sets the origin of the layers coordinate system in the bottom left corner – exactly where the Cartesian Coordinate System has its origin located at.

Now the ViewController must chose what data to display. The view that will contain the chart, calledChartView, only knows how to handle points but the chart should show dates on the x-axsis. Since the axis is not labled in any way it is sufficient to convert the dates into a number, as long as their relative distance to one another is preserved. Using the timeIntervalSince1970 makes a great candidate for that:

        let newData: [StockData] = model.month
        // Store the currently selected data so it can be used later.
        model.currentDataSet = newData
        let newPoints: [CGPoint] = newData.map { (data) -> CGPoint in
            let xComponent = data.date.timeIntervalSince1970
            return CGPoint(x: xComponent, y: data.close)
        }
        chartView.transform(to: newPoints)

Now we have our ChartView in place, added it to the ViewController's view and derived points to draw a line between. The actual drawing consists of two steps:

1. Scale the points so that the minimum x-value is on the left origin, the maximum x value is on the right edge of the view and the corresponding y values are also scaled accordingly to fit the view's bounds.
2. Draw a line between the scaled points.

Step one is done like:

private func scale(_ points: [CGPoint], for size: CGSize) -> [CGPoint] {
        let xValues = points.map( { $0.x } )
        let yValues = points.map( { $0.y } )

        let max = (x: xValues.max() ?? 0, y: yValues.max() ?? 0)
        let min = (x: xValues.min() ?? 0, y: yValues.min() ?? 0)

        let scaleFactorX: CGFloat
        if max.x - min.x == 0 {
            scaleFactorX = 0
        } else {
            scaleFactorX = size.width / (max.x - min.x)
        }

        let scaleFactorY: CGFloat
        if max.y - min.y == 0 {
            scaleFactorY = 0
        } else {
            scaleFactorY = size.height / (max.y - min.y)
        }

        let scaledPoints = points.map { point -> CGPoint in
            let scaledX = scaleFactorX * (point.x - min.x)
            let scaledY = scaleFactorY * (point.y - min.y)

            return CGPoint(x: scaledX, y: scaledY)
        }
        return scaledPoints
    }

And thus the entire drawing function emerges to:

func transform(to newPoints: [CGPoint]) {
        guard newPoints.count > 0 else { return }

        // Step 1: Scale according to current frame:
        let newPath = CGMutablePath()
        let scaledPoints = scale(newPoints, for: frame.size)

        // Step 2: connect scaled points
        // Notice the the first point correlates to the most recent point which is drawn on the right!
        newPath.move(to: scaledPoints.first!)
        for point in scaledPoints.dropFirst() {
            newPath.addLine(to: point)
        }

        graphLayer.path = newPath

        // Store points for later usage:
        points = newPoints
        self.scaledPoints = scaledPoints
}

With that in place we get a nice chart that scales in respect to the minimum and maximum data points:

Baseline

We need another layer for the baseline. In order to achieve a dashed line, we use a CAShapeLayer and set a path on it:

private let baselineLayer: CAShapeLayer = {
        let layer = CAShapeLayer()
        layer.backgroundColor = UIColor.clear.cgColor
        layer.name = "BaselineOfGraph"
        layer.opacity = 1
        layer.strokeColor = UIColor.lightGray.cgColor
        layer.lineWidth = 1.0
        layer.lineJoin = .round
        layer.lineDashPattern = [2, 3]
        return layer
}()

Now the baseline is configured but a frame is not set, yet. We create a new method that is called on layoutSubviews() to do exactly that. Additionally, it creates the path that the baselineLayer is about to draw based on the current frame size and the leftmost datapoint (which defines the position of the baseline).

private func updateBaselineLayer() {
       baselineLayer.removeFromSuperlayer()
        if let leftmostPoint = scaledPoints.last {
            baselineLayer.frame = CGRect(x: 0, y: leftmostPoint.y, width: bounds.width, height: 2.0)
        } else {
            baselineLayer.frame = CGRect(x: 0, y: 0, width: bounds.width, height: 2.0)
        }
        let baselinePath = CGMutablePath()
        baselinePath.move(to: CGPoint(x: 0, y: baselineLayer.bounds.midY))
        baselinePath.addLine(to: CGPoint(x: baselineLayer.bounds.maxX, y: baselineLayer.bounds.midY))
        baselineLayer.path = baselinePath
        graphLayer.addSublayer(baselineLayer)
}

Animate transitions 📉🔜📈

Timing function

As we can see in the videos, the animation does not use a linear timing curve. It rather makes use of heavy easing on both start and end. To come close to that we play around with timing curves until we find something that fits.

private let timingFunction = CAMediaTimingFunction(controlPoints: 0.64, 0, 0, 1)

Two animations need to take place now: the path animation that transforms the graph and an animation that moves the baseline. Both share the same timing function so that they perform in sync.

func transform(to newPoints: [CGPoint]) {
// The same as above:
        guard newPoints.count > 0 else { return }
        let newPath = CGMutablePath()
        let scaledPoints = scale(newPoints, for: frame.size)

        newPath.move(to: scaledPoints.first!)
        for point in scaledPoints.dropFirst() {
            newPath.addLine(to: point)
        }
        let newBaselinePosition = CGPoint(x: baselineLayer.position.x, y: scaledPoints.last!.y)
// New part:    
        let pathAnimation = CABasicAnimation(keyPath: #keyPath(CAShapeLayer.path))
        pathAnimation.fromValue = graphLayer.presentation()?.path
        pathAnimation.toValue = newPath
        pathAnimation.duration = 1.2
        pathAnimation.timingFunction = timingFunction

        let baselineAnimation = CABasicAnimation(keyPath: #keyPath(CALayer.position))
        baselineAnimation.fromValue = baselineLayer.presentation()?.position
        baselineAnimation.toValue = newBaselinePosition
        baselineAnimation.timingFunction = timingFunction
        baselineAnimation.duration = 1.2

        graphLayer.add(pathAnimation, forKey: "PathAnimation")
        baselineLayer.add(baselineAnimation, forKey: "BaselineAnimation")
        // Set the new properties without implicit animations:
        CATransaction.begin()
        CATransaction.setDisableActions(true)
        baselineLayer.position = newBaselinePosition
        graphLayer.path = newPath
        CATransaction.commit()
        // Bookkeeping:
        points = newPoints
        self.scaledPoints = scaledPoints
}

On both layers we use the presentation layer in order to accomodate for a user who changes mind while an animation is ongoing. After both animations are added to their layers, the final values need to be set. We do so by disabling CoreAnimation's implicit animations since they would interfere with the desired ones.

The right feeling of this animation depends on two things:

1. A smaller segment must transition to a larger segment when the displayed interval is increased.
2. The larger segment must zoom in when the time interval is reduced.

This is where the reversed elements from above come into play! We draw the points from right to left. When the number of points increases the new points are added on the left (e.g. the user selected a larger interval like from one month to a year). The points that are alredy contained will morph to their new positions (on the right side) whilst new points come in from the left. At any time the user wants to see the most recent data which happened to be positioned on the right (e.g. the last five days, the last month, the last year).

When the graph is about to contain less elements than it did before, elements on the left are removed which results in a zoom-effect.

Making it interactive 👉👆

In this video you can see how the user is able to interact with the chart view. When the thumb contacts the screen a little highlight indicator appears. It can be dragged around and snapps to the next available data point. That snapping is supported by the TapticEngine which lets the user feel haptic feedback.

This interaction feature basically consists of three parts:

1. Showing a selection indicator when user begins the gesture and remove it when the it ends.
2. Moving the indicator corresponding to the thumb's movement, snapping to the nearest data point.
3. Giving haptic feedback at every snap and update the UI with the price at the given point.

In order to implement this we introduce a new sublayer:

private var touchindicatorLayer: CALayer = {
        let layer = CALayer()
        layer.backgroundColor = UIColor.lightGray.cgColor
        layer.opacity = 0
        return layer
}()

To play along with the users gesture we can override the following methods to get a good starting point:

func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {...}
func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {...}
func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {...}

In touchesBegan we first get the location of the touch and then use a helper function that calculates the point next to that location.

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesBegan(touches, with: event)
        guard !points.isEmpty, !scaledPoints.isEmpty else { return }
        guard let location = touches.first?.location(in: self) else { return }

        // Store where the finger hit the screen to calculate relative movement
        lastTouchLocation = location

        guard let selected = pointNextTo(touch: location) else { return }
        self.selectedElement = selected

        showSelectedPointHandle()
        moveSelectedPointHandle()
        // The delegate updates the UI.
        delegate?.highlightDidChanged(to: selected.indexInData)
}

Other helper methods are responsible for showing and moving the selection indicator. Showing and hiding make also use of implicit animations. Moving should not be animated so they are turned off:

private func showSelectedPointHandle() {
        touchindicatorLayer.opacity = 1
}

private func moveSelectedPointHandle() {
        guard let selectedPoint = selectedElement else { return }
        // Disable implicit animations because moving should exactly follow the users thumb.
        CATransaction.begin()
        CATransaction.setDisableActions(true)
        touchindicatorLayer.position.x = selectedPoint.point.x
        CATransaction.commit()
}

private func hideSelectedPointHandle() {
       touchindicatorLayer.opacity = 0
}

The biggest helper function is the one that calculates the nearest point to a given location. It returns not only the nearest point but also its index. A simple iteration over the contained points is enough for that:

private func pointNextTo(touch: CGPoint) -> (point: CGPoint, indexInData: Int)? {
        guard !points.isEmpty, !scaledPoints.isEmpty else { return nil }
        var pointNextToTouchLocation: CGPoint = .zero
        var bestDistancePointToLocationOfTouch: CGFloat = .greatestFiniteMagnitude
        var indexOfFoundPoint: Int = 0

        for (index, displayedPoint) in scaledPoints.enumerated() {
            let distance = abs(displayedPoint.x - touch.x)
            if distance < bestDistancePointToLocationOfTouch {
                bestDistancePointToLocationOfTouch = distance
                pointNextToTouchLocation = displayedPoint
                indexOfFoundPoint = index
            }
        }
        return (point: pointNextToTouchLocation, indexInData: indexOfFoundPoint)
}

Even though this function is simple, it leaves out the fact that our array of scaled points is already sorted. Finding a minimum is way faster in this cases. Therefore we leverage the fact that once a minimum is found (a.k.a. local minimum) and the next point is further apart than the local minimum, we have found the global minimum. The improved version looks like this:

private func pointNextTo(touch: CGPoint) -> (point: CGPoint, indexInData: Int)? {
        guard !points.isEmpty, !scaledPoints.isEmpty else { return nil }
        var pointNextToTouchLocation: CGPoint = .zero
        var bestDistancePointToLocationOfTouch: CGFloat?
        var indexOfFoundPoint: Int = 0

        for (index, displayedPoint) in scaledPoints.enumerated() {
            let distance = abs(displayedPoint.x - touch.x)

            if bestDistancePointToLocationOfTouch != nil && distance > bestDistancePointToLocationOfTouch! {
                // scaledPoints is sorted regarding their x value. So a local minimum is also a global minimum.
                // We can break the loop when a minimum was found (bestDistancePointToLocationOfTouch != nil) and the next distance is greater than this.
                break
            }
            if distance < bestDistancePointToLocationOfTouch ?? .greatestFiniteMagnitude {
                bestDistancePointToLocationOfTouch = distance
                pointNextToTouchLocation = displayedPoint
                indexOfFoundPoint = index
            }
        }

        return (point: pointNextToTouchLocation, indexInData: indexOfFoundPoint)
}

At this point we show the highlight indicator and have helper methods in place to move and hide it. Let's put them into action:

override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesMoved(touches, with: event)
        guard let location = touches.first?.location(in: self) else { return }
        guard let selected = pointNextTo(touch: location) else { return }

        // Move the handle, store new data and call delegate functions if changed.
        if selectedElement?.indexInData != selected.indexInData {
            selectedElement = selected

            moveSelectedPointHandle()
            delegate?.highlightDidChanged(to: selected.indexInData)
        }
}

override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesEnded(touches, with: event)

        selectedElement = nil
        hideSelectedPointHandle()
        delegate?.hightlightDidEnd()
}

Another possible optimization is to only calculate the nearest point once the touch gesture has moved a significant amount of points. You'll find an implementation for that in the corresponding GitHub project!

We just saw that the ChartView calls its delegate to inform it about highlighted points. The ViewController sits on the receiving side of the calls. It updates the label above the chart view to match the selected element. In this prototype, the ChartView and the ViewController communicate by passing the index of the highlighted element. That is not the most elegant solution and might also be improved.

Here you can see the implementation of said delegate methods:

extension ViewController: ChartViewDelegate {
    func highlightDidChanged(to elementAtIndex: Int) {
        guard elementAtIndex < model.currentDataSet.count else { return }
        let selectedElement = model.currentDataSet[elementAtIndex]
        let leftElement = model.currentDataSet.last!

        // Color is chosen relative to the first element which sets the baseline.
        let colorOfPriceLabel: UIColor = leftElement.close > selectedElement.close ? colorMinus : colorPlus

        updatePriceLabel(to: String.init(format: "%.2f", selectedElement.close), in: colorOfPriceLabel)

        // Only give feedback when not too many points are displayed. That is the case in the 1Y and 5Y state.
        if segmentedControl.selectedSegmentIndex != 4 && segmentedControl.selectedSegmentIndex != 5 {
            feedbackGenerator.selectionChanged()
        }
    }
    private func updatePriceLabel(to newText: String, in color: UIColor) {
        UIView.transition(with: priceLabel, duration: 0.2, options: [.beginFromCurrentState, .transitionCrossDissolve], animations: {
            self.priceLabel.text = newText
            self.priceLabel.textColor = color
        }, completion: nil)

    }
}

Aaaaaand with that we have finished our re-creation of that nice chart view! 🥳

The main takeaways are:

• A chart is nothing more than scaled points connected by a line.
• Using a CABasicAnimation to morph a CGPath is very smooth. By doing so almost the entire animation comes for free.
• The animation benefits a lot from start drawing the chart from the right combined with proportional numbers of points.
• Interaction can be broken down into three steps. The most complicated part is to get the point next to the users finger and even that is straight foreward.
• Accessibility is nothing that takes care of itself! This entire demo is missing accessibility adjustments in order to focus on the main visuals.
• UIKit and CoreAnimation are just awsome frameworks 💯

The entire project is available on my site at GitHub!
As always I would be happy to hear what you think 🙃

“Great, there is the CaracterSet API, let’s do this!”

By stating the problem we start by defining a function that has a string as input and needs to produce a sanitized string and the invalid characters that were removed:

func sanitize(input: String) -> (sanitized: String, removed: String?)

Additionally, the set of invalid characters needs to be defined:

let forbiddenCharacters = CharacterSet(charactersIn: "<>.;*")

The input will not be a gigantic string but we want to keep an eye on performance as the function needs to be called on every character the user types. The best we can hope for is a time complexity of O(n), n being the length of the input string.

Let’s start with the most simple approach: filter through the characters of the input string and figure out which characters not belong in there. Those parts need to be memorized in order to tell the user later why the input differs from their expectation. The individual characters need to be concatenated into a single string, which is done in line 9.

func sanitize1(input: String) -> (removed: String?, sanitized: String) {
    var removed: String?
    let sanitized = input.filter { (character) -> Bool in //O(n)
        if forbiddenCharacterSet.contains(character) { //O(1) (Set containment is constant)

            // Store the removed character
            let forbiddenCharacterAsString = String(character)
            removed = (removed ?? "") // Inizializing it only when needed
            removed?.append(forbiddenCharacterAsString)
            return false
        }
        return true
    }
    return (removed, sanitized)
    // O(n)
}

The time complexity is O(n) since it loops through all the characters and checks if thy are contained in the set. The set containment operation is constant O(1) which gives us the desired complexity of O(n). Yay! 🎉

We even can do better in some scenarios by using set operations! Create a set form the input string and calculate the intersection with the set of forbidden characters. It would be neat if it was possible to get characters out of a character set.

Unfortunately, it is a one way street so there is no way to figure out what characters are contained in the intersection. Another filtering is needed. That might break our performance win as we see.

func sanitize2(input: String) -> (removed: String?, sanitized: String) {
    var removed: String?
    var sanitized = input

    let inputSet = CharacterSet(charactersIn: input) // O(n)
    let intersection = inputSet.intersection(forbiddenCharacterSet) // O(min(n,k))
    if !intersection.isEmpty {
        // Input contains invalid characters, only perform the filter now
        sanitized = input.filter { (character) -> Bool in //O(n)
            if intersection.contains(character) { //O(1) (Set containment is constant)
                ...
            }
            return true
        }
    }
    return (removed, sanitized)
    // Filter only performed when needed, but checking for containment is not possible.
    // ALSO: Getting characters OUT of a CharacterSet is not possible
    // O(n) + O(min(n,k)), when it contains invalid characters, O(min(n,k)) if not
}

Time complexity wise, creating a CharacterSet from a string takes approximately O(n) and may be even cheaper. Calculating the intersection of a set is O(min(k, n)) (k being the amount of forbidden characters). In the most cases k is smaller than n.

A CharacterSet is not a normal set so it is unfortunately not possible to create an array from it.
The only way to figure out what elements causes the intersection to be not empty is to filter again. Compared to function #1 it is only done when we have a reason to do so.

Except:

Cannot convert value of type 'String.Element' (aka 'Character') to expected argument type ’Unicode.Scalar'. As it turns out, a CharacterSet is not simply a set of characters Set<Character>! 😖

It is not possible to check if a given character belongs to the CharacterSet! It is also not possible to retrieve any character out of a CharacterSet or even to convert it back to a string!

Backup strategy:

If CharacterSet does not provide the right APIs for us, we could drop it entirely. We store the forbidden characters in a string let forbiddenCharacters = "<>.;*". Following approach #1 we use the filter function to check if any characters need to be removed form the input. Instead of having the nice constant O(1) lookup operation of a set we need to drop down to a string search operation. That takes O(k) time.

let forbiddenCharacters = "<>.;*"
func sanitize3(input: String) -> (removed: String?, sanitized: String) {
    var removed: String?
    // Using string containment now.
    let sanitized = input.filter { (character) -> Bool in //O(n)

        if forbiddenString.contains(character) { // O(k), not a set operation
            // Store the removed character
            let forbiddenCharacterAsString = String(character)
            removed = (removed ?? "") // Inizializing it only when needed
            removed?.append(forbiddenCharacterAsString)
            return false
        }
        return true
    }

    return (removed, sanitized)
    // O(k*n) in total
}

After filtering we still need to combine the removed characters to a string. Thus, the third approach is O(kn) since for every character in the filter operation the forbidden characters need to be scanned.

But wait, there’s more. We can improve our small algorithm! The String-API gives us one anchor to use our not really beloved CharacterSet: string.rangeOfCharacter(from: CharacterSet). If any character of the CharacterSet is found in the string, its range is returned. However, it only finds the first match. So we need to build a loop to find every occurrence:

func sanitize4(input: String) -> (removed: String?, sanitized: String) {
    var removed: String?
    var sanitized = input

    // Documentation: "This method does not perform any Unicode normalization."
    while let range = sanitized.rangeOfCharacter(from: forbiddenCharacterSet) { // O(n)*k
        let wrongPart = String(sanitized[range])
        removed = (removed ?? "") // Inizializing it only when needed
        removed?.append(wrongPart)
        sanitized.removeSubrange(range)
    }

    return (removed, sanitized)
    // O(k*n) in total but saves a little because .rangeOfCharacter() will find elements more quickly.
}

Apple sadly does not provide any information about the time complexity of this method so we assume that it is O(n). Doing it for every invalid character brings us to O(nk) in total.

That is quite close to our desired O(n). However, it does not produce correct results when unicode is involved. If we waive unicode, we can also modify function #1:

func sanitize1_1(input: String) -> (removed: String?, sanitized: String) {
    var removed: String?
    let sanitized = input.filter { (character) -> Bool in //O(n)

        for scalar in character.unicodeScalars { //O(|unicode scalars in character|)
            if forbiddenCharacterSet.contains(scalar) { //O(1) (Set containment is constant)
                // Store the removed character
                let forbiddenCharacterAsString = String(character)
                removed = (removed ?? "") // Inizializing it only when needed
                removed?.append(forbiddenCharacterAsString)
                return false
            }
        }
        return true
    }
    return (removed, sanitized)
    // O(n) * O(|unicode scalars in character|)
}

In the filter function every character’s unicodeScalar is examined and checked if the CharacterSet contains it. The rest is the same logic as before. Time complexity wise an additional loop with O(|unicode scalars of character|) is introduced. Thus giving us the combined complexity of O(n * |unicode scalars of character|)​.

Wait a minute.

We can not check if a CharacterSet contains a Character but it’s possible to test if it contains a UnicodeScalar! Why isn’t it called “UnicodeScalarSet” then?

🧐

Conclusion

A CharacterSet is really not a set of Characters. We can not check if a string’s character is part of it. It is more a “UnicodeScalarSet”. Since a character can consist of multiple unicode scalars, it is not possible to build a unicode aware API around CharacterSet. It is also impossible to get elements out of a CharacterSet.

If we need unicode support, we'll go with function #3. O(k*n) is quite ok if the invalid characters aren’t too many. Otherwise, function #4 or #1_1 are the best options. With that we come pretty close to O(n).

It wonder why the CharacterSet API is so limited. It even misses the point of its name. Working around its limitations is possible but may be confusing in the first time.

If you want to, you can download the playground here. I would love to hear from you, as well!

Additional information

Using Attabench for performance investigations shows that all of the introduced ways are nearly constant and there is no clear winner. However if you need unicode support, function #3 may be the best fit.

Depending on the memory consumption of your ViewController, it's the systems way of telling you "Hey, please use less memory or I am forced to kill your process". This might be a good time to drop references to cached images that can be re-loaded from disk or via network.

Your app also gets a notification called UIApplicationDidReceiveMemoryWarningNotification when the device will run our of memory. Every object can listen for this notification and act accordingly.

If you do not want do deal with this kind of situation by yourself NSCache assist you. NSCache works like a regular dictionary but will drop elements once the memory pressure gets too high.

You can, for example, put downloaded images into a NSCache. They may get purged during usage of your app. In this case you need to re-download them, which is not great but certainly better than crashing.

You can find the documentation of NSCache over here. And if you need an image cache that writes the cache to disk and manages all of the downloading and storing things for you, please take a look at Kingfisher

This is where NSOrderedSet comes into play. According to Apples documentation, it acts as a Set (containing an element only once) whilst preserving the order of their additions.

Its counterpart NSMutableOrderedSet is the mutable addition to the datatype.

Apples documentation can be found here.

• Xcode debug tab can be opened when a breaktpoint is hit via settings > Running > Pauses > check “Show tab named: Debug”
• po <variable> to get the value of a variable
• expression <expression> (eg. expression didReachSelectedHeight = true) to execute code at the breaktpoint, useful to always take one branch of an if-else-statement
• Breakpoints can execute a LLDB command and then continue running. When double-clicked, one can enter the command via “Add Action”. Enabling “Automatically continue after Evaluation” tells the debugger to execute the command and continue to run the program. Combined with the aforementioned point it is possible to (always) take one branch of an if-else-statement whilst debugging.
• Shortcut the "change>compile>run" workflow by injecting the change directly through LLDB to your running code. Just add another breakpoint and add the code you just inserted to your source file here, too. expression <code you just updated> does the trick that helps to tighten the workflow.
• Debug navigator > add symbol > "add symbolic breakpoint" to add breakpoints to framework's code. For example [UILabel setText:] to add a breakpoint that hits every time a labels text is changed. Resolving the methods name succeeded when a text like “in UIKitCore” appears beside your new breakpoint. When this breakpoint hits, one can
  • po $arg1 to print the receiver of the Objective-C message (the UILabel in this case).
  • po (SEL)$arg2 to print the selector that is sent to the object.
  • po $arg3 to print the first argument passed into the method.
• In a breakpoint, another breakpoint can be set dynamically with breakpoint set --one-shot true -name [UILabel setText:] (one shot breakpoint: only exists until it is triggered and then removed). Useful to “enable” a breakpoint only after a given part of code is executed, for example when the text of a label is updated in the following code.
• Change the instruction pointer while the execution is paused by grabbing the grab-handle left besides “Thread 1: breakpoint…” in the green bar.
• thread jump --by 1 tells the debugger to jump one code line ahead when the breakpoint is hit. Useful to skip code or execute different code by adding another action to the breakpoint.
• Adding a breakpoint to a variable declaration will pause execution every time the variable is accessed.
• po <variable> uses the debugDescription method of an object, p <variable> is more verbose in some cases.
• Watchpoints pause the execution every time the value of a variable is changed. They can be added by right-clicking on the variable in the left side of the debugger pane. They appear below regular breakpoints in Xcode's navigator.
• expression -l objc -O -- [’self.view' recursiveDescription] will print the description of the view as well as all contained subviews. It is an internal Objective-C method and can not be called using Swift. “’“ around self.view will tell the debugger to evaluate this expression first.
• Printing the content of memory addresses like po 0x67aef7891 will not work using swift. One must use expression -l objc -O -- po 0x67aef7891​. A handy way to create a shortcut is by typing command alias poc expression -l objc -O --. Now it is possible to type poc 0x67aef7891.
• In Swift, you can also use po unsafeBitcast(0x2d34bd25, to: YourView.self) instead of using Objective-C evaluation. You can even chain expressions together, like po unsafeBitcast(0x2d34bd25, to: YourView.self).center.y = 300. When a UIView property is changed in this way, one need to tell CoreAnimation to update its frame buffer, as the execution is currently paused: expression CATransaction.flush()
• A python script that changes properties of the view using the debugger is presented. To use commands provided by this script, open ~/.lldbinit in you home directory and add command script import ~/nudge.py. You can also define your previously created aliases there.
• Using the nudge tool, one can live update positions of views by using the debugger.

For example an app can combine user interactions (like tapping a button, fading a slider oder flipping a view) with a light shake of the phone.

Even more sophisticated feedback types are possible. A notification can be combined with the according haptic feedback and then the user can literally feel if a task was successful or not.

My new open source project makes the usage of the mentioned API easier. You can find the project over here at GitHub. As always, I would love to hear feedback from you 🤗.

This blogpost describes the usage of the haptic feedback API and explains the approach of my new project. If it makes live easier for you, feel free to use it. Otherwise it could provide a reference implementation for you.

Implementation

To integrate the haptic feedback, one must use UIFeedbackGenerator. This superclass is derived by three different subclasses: UIImpactFeedbackGenerator, UINotificationFeedbackGenerator and UISelectionFeedbackGenerator.

These three subclasses can be used for three different types of feedback:

1. A single tap-like feedback provided by UIImpactFeedbackGenerator
2. A more complex feedback to indicate that a task has completed (successfully / erroneous) or that a warning occurred by using UINotificationFeedbackGenerator
3. A single tap that implies a change in the users selection, for example when a switch is used or an image snaps into place, provided by UISelectionFeedbackGenerator

In any case, the Taptic Engine must be transitioned into its active state, by calling prepare() on any of the mentioned subclasses. To align the UI interaction or even sounds with the haptic feedback, prepare should be called about one or two seconds in advance.

What FeedbackController does

As it turns out, the API is not as straight forward as it could be. For example, the type of the notification-feedback is set when the feedback should fire.

Then again, the type of an impact feedback must be set during the prepare state.

In addition to that, the API is only available on iPhone 7 or newer, running iOS 11 or higher. Prior to using the described APIs, one must perform availability checks. As a reference to the UIFeedbackGenerator must be held strongly and calls to prepare and perform can occur in many places of your app, those checks need to be implemented quite frequently.

That is where FeedbackController comes into play. It simplifies the calls, needed to perform haptic feedback. It eliminates the need for the developer to keep in mind where the types of feedback can be configured.

In addition to that, it comes with easy to use extensions of UIViewController. They make it possible to use feedback everywhere in the app by two simple method calls:

However, a call to prepareFeedback(for:) should be made as early as possible so that the Taptic Engine can be powered on. Please see the example project for further details.

How to use it

If you integrate FeedbackController using CocoaPods, you need to import FeedbackController first.

When you expect that a user interaction will take place in the next couple of seconds, call prepareFeedback(for:). In doing so, the Taptic Engine will be powered on and is ready for your feedback. The timing is not as critical as might have guessed and it turned out that preparing the Taptic Engine in viewDidAppear(_:) is sufficient.

However, the type of feedback is determined by the call to prepareFeedback(for:).

Secondly, a feedback needs to be performed. To do so, just call

1. hapticFeedbackImpactOccured() for a impact feedback.
2. hapticFeedbackNotificationOccured(with:) for a notification feedback, specifying the type of said notification.
3. hapticFeedbackSelectionChanged() for a selection feedback.

When you are done with the feedback, call doneWithHapticFeedback() to allow the Taptic Engine going back to its idle state.

Installation

You can install it by using CocoaPods or just by copying the FeedbackController.swift file.
Again, here is the link to the project.

Please let me know what you think about it.

Stack Allocation

• Fast and simple place to store data
• Uses a stack pointer that points to the top of the stack
• Each scope provides the amount of memory it needs to run before it gets executed, then the stack pointer is moved and the scope is executed. Now, the scope can add and remove data to the memory it got allocated.
• When the scope is done, the stack pointer is decreased and its data deallocated
• Very little costs as only an integer (the pointer) needs to be increased/decreased
• Some forms of value types can be stored directly on the stack, as long as their sizes are known at compile time
• They also must not be contained by a reference type or contain one, as it would require reference counting
• Absence of reference counting overhead leads to an increased performance
• When a value type is assigned, it gets copied (called Copy-On-Assignment). However, the copy is performed in a constant time.

  

Heap Allocations

• Used for objects that are flexible in size and whose lifetime can be longer than the scopes
• Pointers point to the object in memory
• When a resource should be allocated, the memory management is asked to reserve a certain amount of memory for that resource
• If the resource is not used anymore, its memory can be freed (managed for us by ARC)
• Heap allocation is slower than stack allocation because the data structure is more complex (page tables, …) and it needs to be thread save (in comparison: every thread has its own stack)

Unfortunately, it is not as easy as ’value types go on the stack and reference typed to the heap’.

Value Types on the Heap

• Every struct whose size is not known at compile time must be stored on the heap.
• Heap allocation is necessary when the struct contains a reference type or is contained by one (or even recursively, meaning it stores a value type object that stores a reference type)
• Common situation when for example storing @escaping closures or if the struct is stored by a class​ directly
• Possible for the struct to perform worse than a class​ when it comes to copying
• Value types, that store heap allocated class objects, will not be per-se stored on the heap but will gain a reference counting overhead
• Stack allocated value types are copied in constant time, heap allocated value types are not and will take more time.
• Copy-On-Write (COW) prevents it from being problematic and many Standard Libraries data structures make heavy use of it (e.g. Array, Dictionary and Set)
• With COW, an assigned property will not be copied immediately but only if its content get mutated

  

Problems with Value Types that store Reference Types

• Consider the following struct and class​ that contain many reference type objects:

  

• The next snippet will create HugeClass and HugeStruct many times and check how long the creation takes
• Result: the struct needs more time then class, because it uses copy-on-assignment, in comparison to the class which just increases a reference count
• If executed not only 10_000_000 but 20_000_000 times, the struct needs more than twice the time than before, the time of class only merely increases
• The more reference types a value type contains (more instances of EmptyClass in HugeStruct), the more reference counting overhead is added on copying it.

Takeaway

• Improve the performance by replacing unnecessary references with proper static size value types
• For example, this:

  

• May be replaced by this:

  

• Now, the struct is statically sized and the reference counting overhead is removed.
• Also keep asking yourself if you really need a struct with its Copy-On-Write behavior or if a class would fit you better