<rms-sparkline-bar-chart>
Description
The rms-sparkline-bar-chart
web component renders a sparkline including the following elements:
- a collection of bars, one for each point
These sparkline can be styled. See the properties section for details
Usage
See examples of applications on the Angular web application, rms-sparklines-=styleguid.
Declare the component on the Angular application
The software engineer updates the host application's packages.json to include rms-sparkline-bar-chart:
"rms-sparkline-bar-chart": "MAJOR.minor.patch",
As part of the development process the software engineer can simply symlink the component to app, as follows:
- navigate to the rms-sparklines-=styleguid root folder: $
cd ~/rms-sparklines-styleguide
- link to the component: $
nmp link ~/rms-sparklines/rms-sparkline-bar-chart
To remove the symlink simply:
- navigate to the app root folder: $
cd ~/rms-sparklines-styleguide
- link to the component: $
nmp unlink rms-sparkline-bar-chart
Import the web component into the Angular application, app:
// ...;// ...
Create app component(s) to host the web components
See the rms-sparkline-bar-chart Angular component used to render a simnple sparkline, and the the rms-sparkline-bar-chart Angular component used to render a sparkline with a drop dawn shade.
In our case the component selector is app-rms-sparkline-bar-chart
Configure the Angular Component to use the Web Component:
Edit rms-sparkline-bar-chart.component.html to use the web component, including its attributes. Note that the attributes are all lowercase, even thought they are bound to Angular properties with camel cased names.
Simple inline:
Define the Angular Component properties
Edit rms-sparkline-bar-chart.component.ts to define the propoerties bound to the Web Component attributes. Note that the Angular properties are camel cased; be awere that this can be a source of confusion!
// The sparkline data source barPoints: number = ; // Class(es) to be added to the canvas element. className = ''; // A string giving the color to fill the bars; any valid CSS color. Default is red fillColor = 'red'; // A number giving the height of the sparkline box in pixels. By default, uses the height of the Canvas element. height = 16; // A string giving the color of the sparkline. Any valid CSS color. lineColor = 'black'; // A number giving the stroke of the line in pixels. lineWidth = 15; // Whether to show values the mouse glides over the sparkline toolTip = false; // A number giving the width of the sparkline box in pixels. width = 64;
Add the Angular component showing the web component to the view
Edit app.component.html:
. . . . . .
Properties
- className:A string of space separated classe names to be added to the canvas element. Default is no classes.
- barPoints: An array of numbers representing the sparkline data source. Default is empty array.
- width: A number giving the width of the sparkline box in pixels. Default is 64.
- height: A number giving the height of the sparkline box in pixels. Default is 16.
- linecolor: A string giving the color of the sparkline; any valid CSS color. Default is black.
- linewidth: A number giving the stroke of the line in pixels. Default is 1.
- fillcolor: A string giving the color to fill the bars; any valid CSS color. Default value is blue
- tooltip: Whether to show values the mouse glides over the sparkline. Default value is false;
Methods
The web element does not offer an API. It interactions are controlled by changing its attributes.
Events Received
none
Events Emitted
none
Development
_ _ _____ | | | | __ ___ _____ | ___| _ _ __ | |_| |/ _` \ \ / / _ \ | |_ | | | | '_ \ | _ | (_| |\ V / __/ | _|| |_| | | | ||_| |_|\__,_| \_/ \___| |_| \__,_|_| |_|