<!DOCTYPE html>
<html>

  <head>
    <title>NGX Charts</title>
    <link rel="stylesheet" href="style.css" />
    <base href="" />
    
  <script src="https://npmcdn.com/zone.js@0.8.5/dist/zone.js"></script>
  <script src="https://npmcdn.com/reflect-metadata@0.1.3/Reflect.js"></script>
  <script src="https://npmcdn.com/systemjs@0.19.31/dist/system.js"></script>
  <script src="https://npmcdn.com/typescript@2.1.1/lib/typescript.js"></script>
    <script src="config.js"></script>
    <script>
      System.import('app')
        .catch(console.error.bind(console));
    </script>
  </head>

  <body>
    <my-app>
    loading...
  </my-app>
  </body>

</html>
body{
  font-family: 'RobotoDraft', 'Roboto', 'Helvetica Neue, Helvetica, Arial', sans-serif;
  text-align: center;
  font-style: normal;
  font-weight: 300;
  font-size: 1.4rem;
  line-height: 2rem;
  letter-spacing: 0.01rem;
  color: #212121;
  background-color: #f5f5f5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  margin:20px
}

body > my-app > ngx-charts-line-chart > ngx-charts-chart > div > svg > g > g:nth-child(3) > g:nth-child(2) > g > g > g.line-series > path {
  stroke-dasharray: 5px;
}
### ngx-charts-line-chart example with timeline
System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  //map tells the System loader where to look for things
  map: {
    app: "./src",
    '@angular/core': 'https://npmcdn.com/@angular/core@4.0.1/bundles/core.umd.js',
    '@angular/compiler': 'https://npmcdn.com/@angular/compiler@4.0.1/bundles/compiler.umd.js',
    '@angular/common': 'https://npmcdn.com/@angular/common@4.0.1/bundles/common.umd.js',
    '@angular/animations/browser': "https://npmcdn.com/@angular/animations@4.0.1/bundles/animations-browser.umd.js",
    '@angular/animations': "https://npmcdn.com/@angular/animations@4.0.1/bundles/animations.umd.js",
    '@angular/platform-browser-dynamic': 'https://npmcdn.com/@angular/platform-browser-dynamic@4.0.1/bundles/platform-browser-dynamic.umd.js',
    '@angular/platform-browser': 'https://npmcdn.com/@angular/platform-browser@4.0.1/bundles/platform-browser.umd.js',
    '@angular/platform-browser-animations': 'https://npmcdn.com/@angular/platform-browser@4.0.1/bundles/platform-browser-animations.umd.js',
    '@angular/forms': 'https://npmcdn.com/@angular/forms@4.0.1/bundles/forms.umd.js',
    '@angular/router': 'https://npmcdn.com/@angular/router@4.0.1/bundles/router.umd.js',
    'rxjs': 'https://npmcdn.com/rxjs@5.0.0',
    'moment': 'https://npmcdn.com/moment',
    'd3-array': 'https://npmcdn.com/d3-array',
    'd3-brush': 'https://npmcdn.com/d3-brush',
    'd3-shape': 'https://npmcdn.com/d3-shape',
    'd3-selection': 'https://npmcdn.com/d3-selection',
    'd3-color': 'https://npmcdn.com/d3-color',
    'd3-drag': 'https://npmcdn.com/d3-drag',
    'd3-transition': 'https://npmcdn.com/d3-transition',
    'd3-format': 'https://npmcdn.com/d3-format',
    'd3-force': 'https://npmcdn.com/d3-force',
    'd3-dispatch': 'https://npmcdn.com/d3-dispatch',
    'd3-path': 'https://npmcdn.com/d3-path',
    'd3-ease': 'https://npmcdn.com/d3-ease',
    'd3-timer': 'https://npmcdn.com/d3-timer',
    'd3-quadtree': 'https://npmcdn.com/d3-quadtree',
    'd3-interpolate': 'https://npmcdn.com/d3-interpolate',
    'd3-scale': 'https://npmcdn.com/d3-scale',
    'd3-time': 'https://npmcdn.com/d3-time',
    'd3-collection': 'https://npmcdn.com/d3-collection',
    'd3-time-format': 'https://npmcdn.com/d3-time-format',
    'd3-hierarchy': 'https://npmcdn.com/d3-hierarchy',
    '@swimlane/ngx-charts': 'https://npmcdn.com/@swimlane/ngx-charts'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './bootstrap.ts',
      defaultExtension: 'ts'
    },
    'rxjs': {
      main: './bundles/Rx.js'
    }
  }
});
//our root app component
import {Component, NgModule, OnInit} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser-animations';
import {NgxChartsModule} from '@swimlane/ngx-charts';
import {single, multi} from '../data.ts';

const multi0: any[] = [
  {
    name: 'Red',
    series: [
      {
        name: new Date(2017, 0, 1, 2, 34, 17),
        value: 294
      },
      {
        name: new Date(2017, 1, 1, 2, 34, 17),
        value: 314
      },
      {
        name: new Date(2017, 2, 1, 2, 34, 17),
        value:  264
      }
    ]
  },
  {
    name: 'White',
    series: [
      {
        name: new Date(2017, 0, 1, 2, 34, 17),
        value: 347
      },
      {
        name: new Date(2017, 1, 1, 2, 34, 17),
        value: 369
      },
      {
        name: new Date(2017, 2, 1, 2, 34, 17),
        value:  325
      }
    ]
  },
  {
    name: 'Blue',
    series: [
      {
        name: new Date(2017, 0, 1, 2, 34, 17),
        value: 200
      },
      {
        name: new Date(2017, 1, 1, 2, 34, 17),
        value: 220
      },
      {
        name: new Date(2017, 2, 1, 2, 34, 17),
        value:  230
      }
    ]
  }
];
const multi1: any[] = [
  {
    name: 'simplex',
    series: [
      {
        name: 'A',
        value: 29
      },
      {
        name: 'B',
        value: 31
      },
      {
        name: 'C',
        value: 26
      },
      {
        name: 'D',
        value: 37
      },
      {
        name: 'E',
        value: 30
      },
      {
        name: 'F',
        value: 35
      }
    ]
  },
  {
    name: 'duplex',
    series: [
      {
        name: 'A',
        value: 20
      },
      {
        name: 'B',
        value: 22
      },
      {
        name: 'C',
        value: 30
      },
      {
        name: 'D',
        value: 29
      },
      {
        name: 'E',
        value: 31
      },
      {
        name: 'F',
        value: 27
      }
    ]
  }
];

@Component({
  selector: 'my-app',
  template: `
    <ngx-charts-line-chart
      [view]="view"
      [scheme]="colorScheme"
      [results]="multi"
      [gradient]="gradient"
      [xAxis]="showXAxis"
      [yAxis]="showYAxis"
      [legend]="showLegend"
      [showXAxisLabel]="showXAxisLabel"
      [showYAxisLabel]="showYAxisLabel"
      [xAxisLabel]="xAxisLabel"
      [yAxisLabel]="yAxisLabel"
      [autoScale]="autoScale"
      [timeline]="timeline"
      (select)="onSelect($event)">
    </ngx-charts-line-chart>
    <button (click)=toggleData()>Toggle Data</button>
  `
})
export class App implements OnInit {

  multi: any[];  
  view: any[] = [700, 400];

  constructor() {
    this.multi
  }
  // options
  showXAxis = true;
  showYAxis = true;
  gradient = false;
  showLegend = true;
  showXAxisLabel = true;
  xAxisLabel = 'Date';
  showYAxisLabel = true;
  yAxisLabel = 'Color Value';
  timeline = true;

  colorScheme = {
    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
  };

  // line, area
  autoScale = true;
  
  ngOnInit() {
    this.multi = multi0;
  }
  
  onSelect(event) {
    console.log(event);
  }
  
  toggleData() {
    if (this.multi === multi0) {
      this.timeline = false;
      this.multi = multi1;
      this.xAxisLabel = 'Letter';
      this.yAxisLabel = 'Some Other Value';
    } else {
      this.timeline = true;
      this.multi = multi0;
      this.xAxisLabel = 'Date';
      this.yAxisLabel = 'Color Value';
    }
  }
  
}


@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, NgxChartsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}
//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';

platformBrowserDynamic().bootstrapModule(AppModule)