File

src/module/chart-gridlines/chart-gridlines.component.ts

Implements

OnInit

Metadata

selector chart-gridlines
styleUrls chart-gridlines.component.scss
templateUrl ./chart-gridlines.component.html

Index

Methods
Inputs
Accessors

Constructor

constructor()

Inputs

numLines

Type: number

Default value: 0

orientation

Type: Orientation

Default value: vertical

Methods

ngOnInit
ngOnInit()
Returns : void

Accessors

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>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""