The controlled rising Skyline chart

This library provides a rising skyline chart with an horizontal control panel control. This widget is linked to a dynamic history of buildings. An animation displays the rising of the skyline.

This chart has been created for the project Fitzhì. In Fitzhì, the goal is to display the history of a rising applications portfolio, confronted to the turn-over risk on these applications.

On the top right corner of the skyline, two buttons, with one up and one down arrays, allow the end-user to zoom-in, or zoom-out the view.

A panel control is associated with the skyline. With this panel, you will be able to :

• Pause, and restart the animation.
• Accelerate or decelate the animation
• Move the cursor, along the timeline.

This library requires these peer dependencies :

• @angular/materia
• @fortawesome/fontawesome-free
• bootstrap
• jquery@
• rising-skyline

Installing this library in your project ?

The most simple command npm install controlled-rising-skyline@latest will install this latest release

To import the module inside your application, just add the module ControlledRisingSkylineModule in your app.module.ts.

location :

import {ControlledRisingSkyline} from 'controlled-rising-skyline';

Install (if necessary) the fonts and the bootstrap styles in your project

@import '@fortawesome/fontawesome-free/css/all.css'; @import "bootstrap/dist/css/bootstrap.css";

For testing purpose, the service ControlledRisingSkylineService provides a random generator for testing purpose. Its name is randomSkylineHistory(skyline$: BehaviorSubject<Building[]>)

Using this library in your application ?

To include this component into a container, you just have to declare this section into your HTML template.

<controlled-rising-skyline
    [height] = "'370px'"
    [width] = "'1200px'"
    [margin] = "'10px'"
    [risingSkylineHistory$] = risingSkylineHistory$
    [speed] = 30
    [startingColor] = "'#28a745'"
    [endingColor] = "'#8B0000'"
    [sliderColor] = "'#0000FF'"
    [backgroundColor] = "'whiteSmoke'">
</controlled-rising-skyline>

The parameters are :

Parameter | Decorator | Comment ------------ | ------------- | ------------- height | INPUT | The height of the component, with its unit of measure, hosting the skyline (such as '100px'). width | INPUT | The width of the component, with its unit of measure, hosting the skyline (such as '100px'). margin | INPUT | The margin around the container. risingSkylineHistory$ | INPUT | An observable which emits an unordered array of episodes of the skyline rising. This list will be ordered by default by id. Each episode is associated to a week in a year and contains an array of buildings, of different heights. The Building object is described below. speed | INPUT | (Optional) The speed of the animation in ms. Default value is 30 ms per step startingColor | INPUT | (Optional) The starting color in the index-range. (Each building has a property named index, and this index determines the color). Default color is red endingColor | INPUT | (Optional) The ending color in the index-range. (Each building has a property named index, and this index determines the color). Default color is green displayVerticalTitle | INPUT | boolean Should the vertical title on top of each building be drawn ? Or not ? Default value is false. buildingMinimumHeightVerticalTitle | INPUT | Display the vertical title when the height of buildings reaches this value. font | INPUT | This setting is used by the vertical title. This is Shorthand property for setting 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height', and 'font-family'. "italic 2em "Open Sans", sans-serif'" is a possible example. onClickBuilding | OUTPUT | The component will emit an event containing a BuildingSelected object, each time the user is clicking on a building. onEnterBuilding | OUTPUT | The component will emit an event containing a BuildingSelected object, each time the user is entering in a building. onLeaveBuilding | OUTPUT | The component will emit an event containing a BuildingSelected object, each time the user is leaving a building. sliderColor | INPUT | (Optional) The color of the slider. Default color is violet skylineBackgroundColor | INPUT | (Optional) The background color of the skyline container. Default color is transparent controlBackgroundColor | INPUT | (Optional) The background color of the control panel. Default color is lightGrey

What is a building ?

In this component, the skyline is an array of buildings.

So a building is a piece of the skyline.

Property | type | Comment ------------ | ------------- | ------------- id | number | the identifier width | number | the width of the building height | number | the height of the building year | number | the year of the building corresponding to this state of building week | number | the week of the building corresponding to this state of building index | number | the index of the building in the range of colors. Index range is from 0 to 100. title | string | the title of the building

What is a selected building ?

This component is emetting this object during mouse interaction.

Property | type | Comment ------------ | ------------- | ------------- building | Building | the building under the mouse pointer event | MouseEvent | the underlying mouse event