src/module/chart-gridlines/chart-gridlines.component.ts
selector | chart-gridlines |
styleUrls | chart-gridlines.component.scss |
templateUrl | ./chart-gridlines.component.html |
Methods |
Inputs |
Accessors |
constructor()
|
numLines
|
Type:
Default value: |
orientation
|
Type:
Default value: |
ngOnInit |
ngOnInit()
|
Returns :
void
|
gridlines |
getgridlines()
|
Returns :
any[]
|
import { Orientation } from './../../types';
import { Component, OnInit, Input } from '@angular/core';
import * as R from 'ramda';
@Component({
selector: 'chart-gridlines',
templateUrl: './chart-gridlines.component.html',
styleUrls: ['./chart-gridlines.component.scss']
})
export class ChartGridlinesComponent implements OnInit {
@Input()
public orientation: Orientation = 'vertical';
// The number of grid lines, including the axis itself and the topmost/rightmost line
@Input()
public numLines: number = 0;
public get gridlines(): any[]{
return R.repeat({}, this.numLines);
}
constructor() { }
ngOnInit() {
}
}
<div class="grid-lines-container" [ngClass]="'grid-lines-container--' + orientation">
<svg class="grid-line" *ngFor="let line of gridlines">
<line *ngIf="orientation === 'horizontal'" x1="0" y1="50%" x2="100%" y2="50%"></line>
<line *ngIf="orientation === 'vertical'" x1="50%" y1="0" x2="50%" y2="100%"></line>
</svg>
</div>