The Skyline chart

This library provides a rising skyline chart, i.e. a skyline widget, which is linked to a dynamic history of buildings.

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, two buttons, with one up and one down arrays, allow the end-user to zoom-in, or zoom-out the view.

Installing this library in your project ?

The most simple command npm install rising-skyline will install this library

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

location :

import {RisingSkyline} from 'rising-skyline';

Using this library in your application ?

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

<rising-skyline
    [height] = "'370px'"
    [width] = "'90%'"
    [margin] = "'10px'"
    [risingSkylineHistory$] = risingSkylineHistory$
    [speed] = 30
    [startingColor] = "'#28a745'"
    [endingColor] = "'#8B0000'"
    [displayVerticalTitle] = true
    [font] = "'20px/1 Arial'"
    (onClickBuilding)="onClickBuilding($event)"
    (onEnterBuilding)="onEnterBuilding($event)"
    (onLeaveBuilding)="onLeaveBuilding($event)">
</rising-skyline>

The parameters are :

Parameter	Decorator	Comment
height	INPUT	The height of the container, with its unit of measure, hosting the skyline (such as '100px').
width	INPUT	The width of the container, with its unit of measure, hosting the skyline (such as '100px').
speed	INPUT	The speed of the animation in ms.
margin	INPUT	The margin around the container.
startingColor	INPUT	The starting color in the index-range. (Each building has a property named index, and this index determines the color).
endingColor	INPUT	The ending color in the index-range. (Each building has a property named index, and this index determines the color).
displayVerticalTitle	INPUT	(Optional) boolean Should the vertical title on top of each building be drawn ? Or not ? Default value is false.
buildingMinimumHeightVerticalTitle	INPUT	(Optional) Display the vertical title when the height of buildings reaches this value. Default value is 10.
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.

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