Feature element ordering (depends on PR #13)

[rbachleitner]

Description

We need a way to control the order of elements rendered to the SVG Chart as it influences element visibility. I introduced a very simple new component so I could render a Paper or Bubble Component dynamically depending on the value of the flag 'type' on the Paper/Bubble object.
A more naive approach of rendering a <div> with a v-for directive didn't work out the way I expected it to.

Also introduces a computed property sortedPapersAndBubbles on the App Component, which takes the papers and bubbles arrays, throws them in a single array, and returns a sorted array according to an 'order' flag on the element objects.
This should make implementing hover behaviour (bring papers/bubbles to front/back) very easy.

Checklist:

• My code follows the style guidelines of this project

• The change is fulfilling its purpose and works in all browsers/environments

• I have performed a self-review of my own code

• I have commented my code, particularly in hard-to-understand areas

• I have made corresponding changes to the documentation

• My changes generate no new warnings

• I have added tests that prove my fix is effective or that my feature works

• New and existing unit tests pass locally with my changes

• The change is in line with the design goals of Head Start

• The changes fit our coding style

• The changes do not negatively affect the different stakeholders of Headstart (end users, developers, designers, maintainers, deployers, users of Head Start as a library)