added gradient definitions

src/app/app.component.html

@@ -1,6 +1,7 @@
-<div class="canvas" appCanvas (emitConfig)="updateCanvasConfig($event)"></div>
+<div class="canvas" appCanvas (emitConfig)="updateCanvasConfig($event)" [param]="canvasParam"></div>
 
 <ul *ngIf="canvasConfig">
   <li><pre>{{canvasConfig | json}}</pre></li>
+  <li><pre>{{canvasParam | json}}</pre></li>
 </ul>
 

src/app/app.component.scss

@@ -9,6 +9,7 @@
 
 ul {
   display: flex;
+  flex-direction: column;
   position: absolute;
   top: 0;
   right: auto;
@@ -23,7 +24,6 @@ ul {
 
   li {
     display: flex;
-    justify-content: center;
     align-items: center;
   }
 }

src/app/app.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
+
+import { Param } from './models/param.model';
 import { Config } from './models/config.model';
 
 @Component({
@@ -7,7 +9,17 @@ import { Config } from './models/config.model';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  public canvasConfig: Config|null;
+  public canvasConfig: Config;
+  public canvasParam: Param;
+
+  constructor() {
+    this.canvasParam = {
+      colors: {
+        start: '#cc0045',
+        end: '#0067cc'
+      }
+    };
+  }
 
   public updateCanvasConfig(config): void {
     this.canvasConfig = config;

src/app/canvas/canvas.directive.ts

@@ -1,19 +1,25 @@
-import { Directive, ElementRef, Renderer, AfterViewInit, HostListener, Output, EventEmitter, OnInit } from '@angular/core';
+import { Directive, ElementRef, Renderer, AfterViewInit, HostListener, Output, EventEmitter, OnInit, Input } from '@angular/core';
 import * as Selection from 'd3-selection';
 import * as Shape from 'd3-shape';
 
 import { Config } from './../models/config.model';
 import { Point } from './../models/point.model';
+import { Param } from './../models/param.model';
 
 @Directive({
   selector: '[appCanvas]'
 })
 export class CanvasDirective implements OnInit {
   private canvas: any;
+  private defs: any;
+  private gradient: any;
   private svg: any;
   public config: Config;
 
+  @Input() param: Param;
+
   @Output() emitConfig: EventEmitter<Config>;
+
   @HostListener('window:resize', ['$event'])
   private onResize(event) {
     this.init();
@@ -44,6 +50,17 @@ export class CanvasDirective implements OnInit {
     this.svg
       .attr('width', this.config.width)
       .attr('height', this.config.height);
+
+    this.defs = this.svg.append('defs');
+
+    this.gradient = this.defs.append('linearGradient')
+      .attr('id', 'gradient');
+    this.gradient.append('stop')
+      .attr('stop-color', this.param.colors.end)
+      .attr('offset', '0%');
+    this.gradient.append('stop')
+      .attr('stop-color', this.param.colors.start)
+      .attr('offset', '100%');
   }
 
   private render() {
@@ -69,15 +86,15 @@ export class CanvasDirective implements OnInit {
         .attr('r', 50)
         .attr('cx', point.x)
         .attr('cy', point.y)
-        .attr('fill', '#971240');
+        .attr('fill', point.color ? point.color : 'black');
     });
   }
 
   private drawLine(points: Point[]) {
     return this.svg.append('path')
       .attr('d', Shape.line().x(p => p.x).y(p => p.y)(points))
-      .attr('stroke', 'blue')
+      .attr('stroke', 'url(#gradient)')
-      .attr('stroke-width', 2)
+      .attr('stroke-width', 4)
       .attr('fill', 'none');
   }
 
@@ -91,11 +108,13 @@ export class CanvasDirective implements OnInit {
       height: this.canvas.clientHeight,
       start: {
         x: this.canvas.clientWidth,
-        y: 0
+        y: 0,
+        color: this.param.colors.start
       },
       end: {
         x: 0,
-        y: this.canvas.clientHeight
+        y: this.canvas.clientHeight,
+        color: this.param.colors.end
       },
     };
     // Emit Canvas Config to parent Component

src/app/models/param.model.ts

@@ -0,0 +1,6 @@
+export interface Param {
+  colors: {
+    start: string,
+    end: string
+  };
+}

src/app/models/point.model.ts

@@ -1,4 +1,5 @@
 export interface Point {
-  x: Number;
+  x: number;
-  y: Number;
+  y: number;
+  color?: string;
 }