BasicLinechart
This library was generated with Angular CLI version 12.0.3.
Example on : https://projet-ter-mitton-pinard.github.io/
Patch 0.9.5 notes
- Bug fix on scrollbar, now scroll it's possible on all the window.
- Correction on the display of the labels of the y-axis.
Installation
-
Run
npm install https://github.com/PROJET-TER-MITTON-PINARD/lib-basic-linechart#main
ornpm install basic-linechart
to install. -
Run
npm install d3
andnpm install @types/d3
to install pearDependencies.
Summary
This package contains, a linechart component and some data's examples to try it.
On the linechart component you can :
- zoom with ctrl+wheel
- move the horizontal scrollbar, scroll the time
- move the vertical current time line
You can synchronize the time range and the current time line on several components.
How to use
-
In your app.module.ts, you must add
BasicLinechartModule
to imports of@NgModule
. -
In your app.component.html, you can add the component :
<lib-basic-linechart></lib-basic-linechart>
Parameters of the component
No parameters are required.
- Input
[data]: Data[]
default value : [], data displayed in the component (specified Data in the section below) - Input
[width]: number
default value : 900, width of the component - Input
[height]: number
default value : 200, height of the component - Input
[domain]: [number,number]
default value : [0,0], domain of value (only for continuous values) - Input
[range]: [number,number]
default value : [0,0], range of timestamp that we display in component - Input
[currenTime]: number
default value : 0, timestamp for the current time line - Input
[speedZoom]: number ]0;1]
default value : 0.2 - Output
(rangeChange): [number,number]
to bind with a function in your app, to synchronize components ranges - Output
(currenTimeChange): number
to bind with a function in your app, to synchronize components currentTime
/!\ Don't mix dataset with different value's type (continuous, positive integer) in one component.
/!\ Don't mix dataset with different range of timestamp in one component.
/!\ Don't bind range on components that have dataset with different ranges of timestamp
Interface Data
Represents one dataset. You can add an array of dataset in the component.
interface Data {
label: string;
values: [number,number][]; //[timestamp,value]
color: string;
style: "line" | "area" | "both";
interpolation: "linear" | "step";
}
DataService
Contains function parseBool that you can use in generateData for boolean value.
Contains function generateData, which you can use to parse Data from a dataset str :
public generateData(str:string, label:string, color:string, style: "both"|"line"|"area",interpolation: "step"|"linear", f: (s:string)=>number):Data
/!\ str format example :
`"2016-07-25 15:47:24,459";"PC6";"OFF"
"2016-07-25 19:47:24,459";"PC6";"ON"`
/!\ Fill parameter f with parseBool or parseFloat
Examples :
generateData("PC6","#124568","both", "step",parseBool)
generateData("Temperature_Salon", "purple", "line", "linear", parseFloat)
Contains dataExamples : Data[]. You can import them to test the component (show in the example below).
Example
app.component.ts
Write in the main class :
public data1:Data[]=[];
public data2:Data[]=[];
public data3:Data[]=[];
public data4:Data[]=[];
public data5:Data[]=[];
public data6:Data[]=[];
public datatest:Data[]=[];
public range: [number, number] = [0,0];
public currentTime : number =0;
public range2: [number, number] = [0,0];
public currentTime2 : number =0;
constructor(data : DataService){
this.data1=data.dataExample1;
this.data2=data.dataExample2;
this.data3=data.dataExample3;
this.data4=data.dataExample4;
this.data5=data.dataExample5;
this.data6=data.dataExample6;
}
public updateRange(rangeChange: [number,number]){
this.range=rangeChange;
}
public updateCurrentTime(currentTimeChange: number ){
this.currentTime=currentTimeChange;
}
public updateRange2(rangeChange: [number,number]){
this.range2=rangeChange;
}
public updateCurrentTime2(currentTimeChange: number ){
this.currentTime2=currentTimeChange;
}
public change(i: number){
if(i==1) this.datatest = this.data4;
if(i==2) this.datatest = this.data5;
if(i==3) this.datatest = this.data6;
}
app.component.html
Write :
<lib-basic-linechart [data]=data2 [range]=range (rangeChange)="updateRange($event)" [currentTime]=currentTime (currentTimeChange)="updateCurrentTime($event)"></lib-basic-linechart>
<lib-basic-linechart [data]=data1 [domain]=[0,30] [range]=range (rangeChange)="updateRange($event)" [currentTime]=currentTime (currentTimeChange)="updateCurrentTime($event)"></lib-basic-linechart>
<lib-basic-linechart [width] = "1200" [height]="200" [data]=data3 [range]=range (rangeChange)="updateRange($event)" [currentTime]=currentTime (currentTimeChange)="updateCurrentTime($event)"></lib-basic-linechart>
<lib-basic-linechart [speedZoom]=0.7 [data]=data4 [range]=range2 (rangeChange)="updateRange2($event)" [currentTime]=currentTime2 (currentTimeChange)="updateCurrentTime2($event)"></lib-basic-linechart>
<lib-basic-linechart [speedZoom]=0.7 [data]=datatest [domain]=[26,27] [range]=range2 (rangeChange)="updateRange2($event)" [currentTime]=currentTime2 (currentTimeChange)="updateCurrentTime2($event)"></lib-basic-linechart>
<button (click)='change(1)'>Data 4</button>
<button (click)='change(2)'>Data 5</button>
<button (click)='change(3)'>Data 6</button>