[Angular] 全てのWijmoコンポーネント

<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <script type="text/javascript" charset="utf-8">
      window.AngularVersionForThisPlunker = 'latest'
    </script>
    <title>angular playground</title>
		<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css" />
		<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
		<style>html{font-size:14px;}</style>
		<script src="http://cdn.wijmo.com/5.latest/controls/cultures/wijmo.culture.ja.min.js"></script>
		<script src="http://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
		<script src="http://demo.grapecity.com/wijmo/sample/scripts/sample.js"></script>
    <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="http://cdn.wijmo.com/5.latest/controls/cultures/wijmo.culture.ja.min.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <div class="container">
      <my-app>
        loading...
      </my-app>
    </div>
  </body>

</html>

var angularVersion;
if(window.AngularVersionForThisPlunker === 'latest'){
  angularVersion = ''; //picks up latest
}
else {
  angularVersion = '@' + window.AngularVersionForThisPlunker;
}

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  //map tells the System loader where to look for things
  map: {
    
    'app': './src',
    '@angular/core': 'npm:@angular/core'+ angularVersion + '/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common' + angularVersion + '/bundles/common.umd.js',
    '@angular/common/http': 'npm:@angular/common' + angularVersion + '/bundles/common-http.umd.js',
    '@angular/compiler': 'npm:@angular/compiler' + angularVersion  + '/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http' + angularVersion + '/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router' + angularVersion +'/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms' + angularVersion + '/bundles/forms.umd.js',
    '@angular/animations': 'npm:@angular/animations' + angularVersion + '/bundles/animations.umd.js',
    '@angular/platform-browser/animations': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-animations.umd.js',
    '@angular/animations/browser': 'npm:@angular/animations' + angularVersion + '/bundles/animations-browser.umd.js',
    
    '@angular/core/testing': 'npm:@angular/core' + angularVersion + '/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-testing.umd.js',
    '@angular/common/http/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-http-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http' + angularVersion + '/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router' + angularVersion + '/bundles/router-testing.umd.js',
    'tslib': 'npm:tslib@1.6.1',
    'rxjs': 'npm:rxjs',
    'typescript': 'npm:typescript@2.2.1/lib/typescript.js',
    'wijmo': 'http://cdn.wijmo.com/5.latest-npm-images/wijmo-amd-min'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    },
    wijmo: {
      defaultExtension: 'js',
      meta: {
        '*': {'scriptLoad': true}
      }
    }
  }
});

//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule)

//our root app component
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { WjGridModule } from 'wijmo/wijmo.angular2.grid';
import { WjGridFilterModule } from 'wijmo/wijmo.angular2.grid.filter';
import { WjGridMultirowModule } from 'wijmo/wijmo.angular2.grid.multirow';
import { WjGridSheetModule } from 'wijmo/wijmo.angular2.grid.sheet';
import { WjInputModule } from 'wijmo/wijmo.angular2.input';
import { WjNavModule } from 'wijmo/wijmo.angular2.nav';
import { WjChartModule } from 'wijmo/wijmo.angular2.chart';
import { WjChartAnalyticsModule } from 'wijmo/wijmo.angular2.chart.analytics';
import { WjChartFinanceModule } from 'wijmo/wijmo.angular2.chart.finance';
import { WjChartHierarchicalModule } from 'wijmo/wijmo.angular2.chart.hierarchical';
import { WjChartInteractionModule } from 'wijmo/wijmo.angular2.chart.interaction';
import { WjChartRadarModule } from 'wijmo/wijmo.angular2.chart.radar';
import { WjOlapModule } from 'wijmo/wijmo.angular2.olap';
import { WjGaugeModule } from 'wijmo/wijmo.angular2.gauge';
import { WjViewerModule } from 'wijmo/wijmo.angular2.viewer';

import { AppComponent } from './app.component';
import { GridsComponent } from './grids.component';
import { InputsComponent } from './inputs.component';
import { NavsComponent } from './navs.component';
import { ChartsComponent } from './charts.component';
import { DVsComponent } from './dvs.component';
import { FilesComponent } from './files.component';
import { ViewersComponent } from './viewers.component';

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    WjGridModule,
    WjGridFilterModule,
    WjGridMultirowModule,
    WjGridSheetModule,
    WjInputModule,
    WjNavModule,
    WjChartModule,
    WjChartAnalyticsModule,
    WjChartFinanceModule,
    WjChartHierarchicalModule,
    WjChartInteractionModule,
    WjChartRadarModule,
    WjOlapModule,
    WjGaugeModule,
    WjViewerModule,
  ],
  declarations: [
    AppComponent,
    GridsComponent,
    InputsComponent,
    NavsComponent,
    ChartsComponent,
    DVsComponent,
    FilesComponent,
    ViewersComponent,
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

import { Component, VERSION, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
<h3>Wijmoコンポーネント（Angular {{version}}）</h3>
<ul class="nav nav-pills">
  <li class="nav-item"><a class="nav-link" routerLink="/grids" routerLinkActive="active">グリッド</a></li>
  <li class="nav-item"><a class="nav-link" routerLink="/inputs" routerLinkActive="active">入力</a></li>
  <li class="nav-item"><a class="nav-link" routerLink="/navs" routerLinkActive="active">ナビゲーション</a></li>
  <li class="nav-item"><a class="nav-link" routerLink="/charts" routerLinkActive="active">チャート</a></li>
  <li class="nav-item"><a class="nav-link" routerLink="/dvs" routerLinkActive="active">データ可視化</a></li>
  <li class="nav-item"><a class="nav-link" routerLink="/files" routerLinkActive="active">ファイル</a></li>
  <li class="nav-item"><a class="nav-link" routerLink="/viewers" routerLinkActive="active">ビューワー</a></li>
</ul>
<router-outlet></router-outlet>
  `,
  styles: [`
h4 {
  margin-top: 2rem;
}
  `],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  version = VERSION.full;
}

import { Component } from '@angular/core';

@Component({
  selector: 'grids',
  template: `
<h4>FlexGrid</h4>
<wj-flex-grid [itemsSource]="orders">
  <wj-flex-grid-filter></wj-flex-grid-filter>
  <wj-flex-grid-column binding="No" header="No" [width]="80"></wj-flex-grid-column>
  <wj-flex-grid-column binding="商品名" header="商品名" [width]="200"></wj-flex-grid-column>
  <wj-flex-grid-column binding="受注日" header="受注日" [width]="100"></wj-flex-grid-column>
  <wj-flex-grid-column binding="金額" header="金額" [width]="100"></wj-flex-grid-column>
  <wj-flex-grid-column binding="値引" header="値引" [width]="80"></wj-flex-grid-column>
</wj-flex-grid>

<h4>MultiRow</h4>
<wj-multi-row [itemsSource]="ordersDetail" [layoutDefinition]="layoutDefinition">
  <wj-flex-grid-filter></wj-flex-grid-filter>
</wj-multi-row>

<h4>FlexSheet</h4>
<wj-flex-sheet [itemsSource]="orders"></wj-flex-sheet>
  `,
  styles: [`
wj-flex-grid, wj-multi-row, wj-flex-sheet {
  height: 300px;
}
  `]
})
export class GridsComponent {
  orders = sample.orders(100);
  ordersDetail = sample.ordersDetail(100);
  layoutDefinition =   [
    {
      cells: [
        { binding: 'No', header: 'No', width: 80 }
      ]
    },
    {
      colspan: 2, cells: [
        { binding: '商品名', header: '商品名', colspan: 2 },
        { binding: '分類名', header: '分類名' },
        { binding: '顧客名', header: '顧客名' },
      ]
    },
    {
      cells: [
        { binding: '数量', header: '数量' },
        { binding: '金額', header: '金額', format: 'c' }
      ]
    },
    {
      cells: [
        { binding: '受注日', header: '受注日' },
        { binding: '値引', header: '値引' }
      ]
    }
  ];
}

import { Component } from '@angular/core';

@Component({
  selector: 'inputs',
  template: `
<h4>Calendar</h4>
<wj-calendar></wj-calendar>

<h4>InputDate</h4>
<wj-input-date></wj-input-date>

<h4>InputTime</h4>
<wj-input-time></wj-input-time>

<h4>InputDateTime</h4>
<wj-input-date-time></wj-input-date-time>

<h4>InputMask</h4>
<wj-input-mask mask="☎000-0000-0000"></wj-input-mask>

<h4>InputNumber</h4>
<wj-input-number [step]="1"></wj-input-number>

<h4>ComboBox</h4>
<wj-combo-box [itemsSource]="countryNames"></wj-combo-box>

<h4>MultiSelect</h4>
<wj-multi-select [itemsSource]="countryNames"></wj-multi-select>

<h4>AutoComplete</h4>
<wj-auto-complete [itemsSource]="countryNames"></wj-auto-complete>

<h4>MultiAutoComplete</h4>
<wj-multi-auto-complete [itemsSource]="countryNames"></wj-multi-auto-complete>

<h4>ListBox</h4>
<wj-list-box [itemsSource]="countryNames"></wj-list-box>

<h4>InputColor</h4>
<wj-input-color></wj-input-color>

<h4>ColorPicker</h4>
<wj-color-picker></wj-color-picker>
  `,
  styles: [`
wj-calendar {
  width: 300px;
  display: block;
}
wj-list-box {
  height: 200px;
}
  `]
})
export class InputsComponent {
  countryNames = sample.countryNames();
}

import { Component } from '@angular/core';

@Component({
  selector: 'navs',
  template: `
<h4>TreeView</h4>
<wj-tree-view [itemsSource]="productsTree" displayMemberPath="名前" [showCheckboxes]="true" [allowDragging]="true"></wj-tree-view>

<h4>Popup</h4>
<button class="btn btn-secondary" (click)="popup.show()">Popupを表示</button>
<wj-popup #popup>
  <div class="wj-dialog-header">
    ヘッダ
  </div>
  <div class="wj-dialog-body">
    <p>コンテンツ</p>
  </div>
  <div class="wj-dialog-footer">
    <button class="btn btn-primary wj-hide-ok">OK</button>
    <button class="btn btn-secondary wj-hide-cancel">キャンセル</button>
  </div>
</wj-popup>

<h4>Menu</h4>
<wj-menu header="ファイル">
  <wj-menu-item>新規作成</wj-menu-item>
  <wj-menu-item>開く</wj-menu-item>
  <wj-menu-item>保存</wj-menu-item>
  <wj-menu-separator></wj-menu-separator>
  <wj-menu-item>終了</wj-menu-item>
</wj-menu>
  `,
  styles: [`
wj-tree-view {
  height: 400px;
}
  `]
})
export class NavsComponent {
  productsTree = sample.productsTree();
}

import { Component } from '@angular/core';

@Component({
  selector: 'dvs',
  template: `
<h4>PivotPanel</h4>
<wj-pivot-panel #pivotPanel [itemsSource]="ordersDetail" (initialized)="initPivotPanel(pivotPanel)"></wj-pivot-panel>

<h4>PivotGrid</h4>
<wj-pivot-grid [itemsSource]="pivotPanel"></wj-pivot-grid>

<h4>PivotChart</h4>
<wj-pivot-chart [itemsSource]="pivotPanel" stacking="Stacked"></wj-pivot-chart>

<h4>RadialGauge</h4>
<wj-radial-gauge [(value)]="value" [isReadOnly]="false">
  <wj-range wjProperty="pointer" [thickness]="0.5"></wj-range>
  <wj-range [min]="0" [max]="33" color="rgba(255,100,100,0.5)"></wj-range>
  <wj-range [min]="33" [max]="66" color="rgba(255,255,100,0.5)"></wj-range>
  <wj-range [min]="66" [max]="100" color="rgba(100,255,100,0.5)"></wj-range>
</wj-radial-gauge>

<h4>LinearGauge</h4>
<wj-linear-gauge [(value)]="value" [isReadOnly]="false">
  <wj-range wjProperty="pointer" [thickness]="0.5"></wj-range>
  <wj-range [min]="0" [max]="33" color="rgba(255,100,100,0.5)"></wj-range>
  <wj-range [min]="33" [max]="66" color="rgba(255,255,100,0.5)"></wj-range>
  <wj-range [min]="66" [max]="100" color="rgba(100,255,100,0.5)"></wj-range>
</wj-linear-gauge>

<h4>BulletGraph</h4>
<wj-bullet-graph [(value)]="value" [isReadOnly]="false" [target]="50" [good]="66" [bad]="33"></wj-bullet-graph>
  `,
  styles: [`
wj-pivot-panel {
  width: 400px;
}
wj-pivot-grid {
  height: 400px;
}
wj-radial-gauge {
  height: 200px;
}
  `]
})
export class DVsComponent {
  ordersDetail = sample.ordersDetail(10000);
  value = 60;

  constructor() {
    for (var i = 0; i < this.ordersDetail.length; i++) {
      this.ordersDetail[i].受注年度 = wijmo.Globalize.formatDate(this.ordersDetail[i].受注日, 'EEEE年度');
    }
  }

  initPivotPanel(pivotPanel) {
    pivotPanel.columnFields.push('分類名');
    pivotPanel.rowFields.push('受注年度');
    pivotPanel.rowFields.push('受注日');
    pivotPanel.rowFields[1].format = '"Q"U';
    pivotPanel.valueFields.push('金額');
    pivotPanel.engine.showRowTotals = 'Subtotals';
  }
}

import { Component } from '@angular/core';
import * as wijmoXlsx from 'wijmo/wijmo.xlsx';
import * as wijmoPdf from 'wijmo/wijmo.pdf';
import { FlexGridXlsxConverter } from 'wijmo/wijmo.grid.xlsx';
import { FlexGridPdfConverter } from 'wijmo/wijmo.grid.pdf';

@Component({
  selector: 'files',
  template: `
<h4>Excel</h4>
<button class="btn btn-secondary" (click)="saveExcel()">Excelを作成</button>
<button class="btn btn-secondary" (click)="saveGridToExcel(flexGrid)">FlexGridをExcelに保存</button>

<h4>PDF</h4>
<button class="btn btn-secondary" (click)="savePdf()">PDFを作成</button>
<button class="btn btn-secondary" (click)="saveGridToPdf(flexGrid)">FlexGridをPDFに保存</button>

<h4>FlexGrid</h4>
<wj-flex-grid #flexGrid [itemsSource]="orders">
  <wj-flex-grid-filter></wj-flex-grid-filter>
  <wj-flex-grid-column binding="No" header="No" [width]="80"></wj-flex-grid-column>
  <wj-flex-grid-column binding="商品名" header="商品名" [width]="200"></wj-flex-grid-column>
  <wj-flex-grid-column binding="受注日" header="受注日" [width]="100"></wj-flex-grid-column>
  <wj-flex-grid-column binding="金額" header="金額" [width]="100"></wj-flex-grid-column>
  <wj-flex-grid-column binding="値引" header="値引" [width]="80"></wj-flex-grid-column>
</wj-flex-grid>
  `,
  styles: [`
wj-flex-grid {
  height: 300px;
}
  `]
})
export class FilesComponent {
  orders = sample.orders(100);
  fontFile = { source: 'http://demo.grapecity.com/wijmo/sample/fonts/ipaexg.ttf', name: 'ipaexg' };
  font = new wijmo.pdf.PdfFont('ipaexg');

  saveExcel() {
    let sheet = new wijmoXlsx.WorkSheet();
  
    let font = new wijmoXlsx.WorkbookFont();
    font.color = 'red';
  
    let style = new wijmoXlsx.WorkbookStyle();
    style.font = font;
  
    let rows = sheet.rows;
    rows[0] = new wijmoXlsx.WorkbookRow();
    rows[0].cells[0] = new wijmoXlsx.WorkbookCell();
    rows[0].cells[0].value = 'Wijmo';
    rows[0].cells[0].style = style;
  
    let book = new wijmoXlsx.Workbook();
    book.sheets.push(sheet);
    book.save('Wijmo.xlsx');
  }

  saveGridToExcel(flexGrid) {
    FlexGridXlsxConverter.save(flexGrid, { includeCellStyles: false }, 'FlexGrid.xlsx');
  }

  savePdf() {
    let doc = new wijmoPdf.PdfDocument({
      ended: function (s, e) {
        wijmoPdf.saveBlob(e.blob, 'Wijmo.pdf');
      }
    });
    doc.registerFont(this.fontFile);
    doc.setFont(this.font);
    doc.drawText('Wijmo（ウィジモ）は、軽量／高速に動作するJavaScriptコントロールで、そのアーキテクチャは大規模／中小規模の業務Webアプリケーションの開発向けに最適化されています。');
    doc.end();
  }

  saveGridToPdf(flexGrid) {
    FlexGridPdfConverter.export(flexGrid, 'FlexGrid.pdf', {
      embeddedFonts: [this.fontFile],
      styles: {
        cellStyle: { font: this.font }
      }
    });
  }
}

import { Component } from '@angular/core';

@Component({
  selector: 'viewers',
  template: `
<h4>ReportViewer</h4>
<wj-report-viewer serviceUrl="http://demo.grapecity.com/c1/aspnet/c1webapi/4.0.20172.105/api/report/" filePath="ReportsRoot/Japanese Reports/複写伝票.flxr" reportName="納品書01"></wj-report-viewer>

<h4>PdfViewer</h4>
<wj-pdf-viewer serviceUrl="http://demo.grapecity.com/c1/aspnet/c1webapi/4.0.20172.105/api/pdf/" filePath="PdfRoot/従業員別売上.pdf"></wj-pdf-viewer>
  `,
  styles: [`
wj-report-viewer, wj-pdf-viewer {
  display: block;
  width: 100%;
}
  `]
})
export class ViewersComponent {
}

import { Component } from '@angular/core';
import { CollectionView } from 'wijmo/wijmo';

@Component({
  selector: 'charts',
  template: `
<h4>基本</h4>
<wj-combo-box [itemsSource]="basicChartTypes" displayMemberPath="name" selectedValuePath="value"></wj-combo-box>
<wj-flex-chart [itemsSource]="sales" [chartType]="basicChartTypes.currentItem.value" bindingX="年度">
  <wj-flex-chart-series binding="飲料" name="飲料"></wj-flex-chart-series>
  <wj-flex-chart-series binding="調味料" name="調味料"></wj-flex-chart-series>
  <wj-flex-chart-series binding="菓子類" name="菓子類"></wj-flex-chart-series>
</wj-flex-chart>

<h4>じょうご</h4>
<wj-flex-chart [itemsSource]="salesItems" chartType="Funnel" bindingX="段階">
  <wj-flex-chart-series binding="案件数" name="案件数"></wj-flex-chart-series>
</wj-flex-chart>

<h4>円</h4>
<wj-flex-pie [itemsSource]="salesByCategory" binding="売上" bindingName="分類名"></wj-flex-pie>

<h4>株価</h4>
<wj-combo-box [itemsSource]="financialChartTypes" displayMemberPath="name" selectedValuePath="value"></wj-combo-box>
<wj-financial-chart [itemsSource]="stocks" [chartType]="financialChartTypes.currentItem.value" bindingX="date">
  <wj-flex-chart-series binding="high,low,open,close,volume"></wj-flex-chart-series>
  <wj-flex-chart-axis wjProperty="axisX" format="M/d"></wj-flex-chart-axis>
</wj-financial-chart>

<h4>レーダー</h4>
<wj-combo-box [itemsSource]="radarChartTypes" displayMemberPath="name" selectedValuePath="value" [selectedIndex]="2"></wj-combo-box>
<wj-flex-radar [itemsSource]="sales" [chartType]="radarChartTypes.currentItem.value" bindingX="年度">
  <wj-flex-chart-series binding="飲料" name="飲料"></wj-flex-chart-series>
  <wj-flex-chart-series binding="調味料" name="調味料"></wj-flex-chart-series>
</wj-flex-radar>

<h4>ポーラー</h4>
<wj-combo-box [itemsSource]="radarChartTypes" displayMemberPath="name" selectedValuePath="value"></wj-combo-box>
<wj-flex-radar [itemsSource]="polars" [chartType]="radarChartTypes.currentItem.value" bindingX="角度">
  <wj-flex-chart-series binding="計測値1" name="計測値1"></wj-flex-chart-series>
  <wj-flex-chart-series binding="計測値2" name="計測値2"></wj-flex-chart-series>
</wj-flex-radar>

<h4>ツリーマップ</h4>
<wj-tree-map [itemsSource]="salesByCP" binding="売上" bindingName="分類名,商品名" labelContent="{name}" [maxDepth]="2"></wj-tree-map>

<h4>サンバースト</h4>
<wj-sunburst [itemsSource]="salesInYQM" binding="売上" bindingName="年度,四半期,月" labelContent="{name}"></wj-sunburst>

<h4>箱ひげ図</h4>
<wj-flex-chart [itemsSource]="salesArray" bindingX="年度">
  <wj-flex-chart-box-whisker binding="売上"></wj-flex-chart-box-whisker>
</wj-flex-chart>

<h4>ウォーターフォール</h4>
<wj-flex-chart [itemsSource]="profitLoss" bindingX="項目名">
  <wj-flex-chart-waterfall binding="損益" [intermediateTotalPositions]="[2]" [showIntermediateTotal]="true" intermediateTotalLabels="営業利益" [showTotal]="true" totalLabel="経常利益"></wj-flex-chart-waterfall>
</wj-flex-chart>

<h4>移動平均線</h4>
<wj-flex-chart [itemsSource]="stocks" chartType="Candlestick" bindingX="date">
  <wj-flex-chart-series binding="high,low,open,close"></wj-flex-chart-series>
  <wj-flex-chart-moving-average binding="close" name="MA (25)" [period]="25" [style]="{stroke: 'green'}"></wj-flex-chart-moving-average>
  <wj-flex-chart-moving-average binding="close" name="MA (5)" [period]="5" [style]="{stroke: 'red'}"></wj-flex-chart-moving-average>
  <wj-flex-chart-axis wjProperty="axisX" format="M/d"></wj-flex-chart-axis>
</wj-flex-chart>

<h4>近似曲線</h4>
<wj-flex-chart [itemsSource]="sales" bindingX="年度">
  <wj-flex-chart-series binding="飲料"></wj-flex-chart-series>
  <wj-flex-chart-trend-line binding="飲料"></wj-flex-chart-trend-line>
</wj-flex-chart>

<h4>エラーバー</h4>
<wj-flex-chart [itemsSource]="sales" bindingX="年度">
  <wj-flex-chart-error-bar binding="飲料" [value]="1000000"></wj-flex-chart-error-bar>
</wj-flex-chart>

<h4>Y関数</h4>
<wj-flex-chart>
  <wj-flex-chart-y-function-series name="y = sin(4x) * cos(3x)" [min]="-10" [max]="10" [sampleCount]="300" [func]="func"></wj-flex-chart-y-function-series>
</wj-flex-chart>

<h4>パラメーター関数</h4>
<wj-flex-chart>
  <wj-flex-chart-parametric-function-series name="x = cos(5t), y = sin(7t)" [max]="2 * pi" [sampleCount]="1000" [xFunc]="xFunc" [yFunc]="yFunc"></wj-flex-chart-parametric-function-series>
</wj-flex-chart>
  `,
  styles: [`
  `]
})
export class ChartsComponent {
  basicChartTypes = new CollectionView(sample.stringsToKeyValues('縦棒,横棒,散布図,折れ線,マーカー付き折れ線,面,バブル,,,スプライン,マーカー付きスプライン,スプライン面'.split(',')));
  financialChartTypes = new CollectionView(sample.stringsToKeyValues(',,,,,ローソク足,バー,平均足,新値足,練行足,カギ足,カラムボリューム,エクイボリューム,ローソクボリューム,アームズローソクボリューム'.split(',')));
  radarChartTypes = new CollectionView(sample.stringsToKeyValues('棒,散布図,折れ線,マーカー付き折れ線グラフ,面'.split(',')));
  sales = sample.sales();
  salesItems = sample.salesItems();
  salesByCategory = sample.salesByCategory();
  stocks = sample.stocks();
  polars = sample.polars();
  salesByCP = sample.salesByCP();
  salesInYQM = sample.salesInYQM();
  salesArray = sample.salesArray();
  profitLoss = sample.profitLoss();
  func = (x) => {
    return Math.sin(4 * x) * Math.cos(3 * x);
  };
  xFunc = (t) => {
    return Math.cos(5 * t);
  };
  yFunc = (t) => {
    return Math.sin(7 * t);
  };
  pi = Math.PI;
}

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { GridsComponent } from './grids.component';
import { InputsComponent } from './inputs.component';
import { NavsComponent } from './navs.component';
import { ChartsComponent } from './charts.component';
import { DVsComponent } from './dvs.component';
import { FilesComponent } from './files.component';
import { ViewersComponent } from './viewers.component';

const appRoutes: Routes = [
  { path: '', redirectTo: '/grids', pathMatch: 'full' },
  { path: 'grids', component: GridsComponent },
  { path: 'inputs', component: InputsComponent },
  { path: 'navs', component: NavsComponent },
  { path: 'charts', component: ChartsComponent },
  { path: 'dvs', component: DVsComponent },
  { path: 'files', component: FilesComponent },
  { path: 'viewers', component: ViewersComponent },
];

@NgModule({
  imports: [ RouterModule.forRoot(appRoutes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}