chartjs-ng2
Version:
Reactive, responsive, beautiful charts for Angular2 based on Chart.js
128 lines (116 loc) • 4.5 kB
text/typescript
import { Component } from '@angular/core';
// webpack html imports
let doc = require('html-loader!markdown-loader!../../doc.md');
@Component({
selector: 'charts-section',
template: `
<br>
<div class="row">
<h2>API</h2>
<div class="card card-block panel panel-default panel-body" [innerHTML]="doc"></div>
</div>
<section [attr.id]="name">
<div class="row">
<h1>{{name}}
<small>(<a [attr.href]="src">src</a>)</small>
</h1>
</div>
<hr>
<div class="row">
<h2>Example</h2>
<chart-section [ts]="desc.lineChart.ts"
[ ]="desc.lineChart.html"
[ ]="desc.lineChart.id"
[ ]="desc.lineChart.heading">
<line-chart-demo></line-chart-demo>
</chart-section>
<chart-section [ts]="desc.barChart.ts"
[ ]="desc.barChart.html"
[ ]="desc.barChart.id"
[ ]="desc.barChart.heading">
<bar-chart-demo></bar-chart-demo>
</chart-section>
<chart-section [ts]="desc.douChart.ts"
[ ]="desc.douChart.html"
[ ]="desc.douChart.id"
[ ]="desc.douChart.heading">
<doughnut-chart-demo></doughnut-chart-demo>
</chart-section>
<chart-section [ts]="desc.radarChart.ts"
[ ]="desc.radarChart.html"
[ ]="desc.radarChart.id"
[ ]="desc.radarChart.heading">
<radar-chart-demo></radar-chart-demo>
</chart-section>
<chart-section [ts]="desc.pieChart.ts"
[ ]="desc.pieChart.html"
[ ]="desc.pieChart.id"
[ ]="desc.pieChart.heading">
<pie-chart-demo></pie-chart-demo>
</chart-section>
<chart-section [ts]="desc.polarChart.ts"
[ ]="desc.polarChart.html"
[ ]="desc.polarChart.id"
[ ]="desc.polarChart.heading">
<polar-area-chart-demo></polar-area-chart-demo>
</chart-section>
<chart-section [ts]="desc.baseChart.ts"
[ ]="desc.baseChart.html"
[ ]="desc.baseChart.id"
[ ]="desc.baseChart.heading">
<base-chart-demo></base-chart-demo>
</chart-section>
</div>
<br>
</section>
`
})
export class ChartsSectionComponent {
public name: string = 'Charts';
public src: string = 'https://github.com/valor-software/ng2-charts/blob/development/src/charts/charts.ts';
public doc: string = doc;
public desc: any = {
lineChart: {
heading: 'Line Chart',
id: 'lineChart',
ts: require('!!raw-loader?lang=typescript!./charts/line-chart-demo.ts'),
html: require('!!raw-loader?lang=markup!./charts/line-chart-demo.html')
},
barChart: {
heading: 'Bar Chart',
id: 'barChart',
ts: require('!!raw-loader?lang=typescript!./charts/bar-chart-demo.ts'),
html: require('!!raw-loader?lang=markup!./charts/bar-chart-demo.html')
},
douChart: {
heading: 'Doughnut Chart',
id: 'doughnutChart',
ts: require('!!raw-loader?lang=typescript!./charts/doughnut-chart-demo.ts'),
html: require('!!raw-loader?lang=markup!./charts/doughnut-chart-demo.html')
},
radarChart: {
heading: 'Radar Chart',
id: 'radarChart',
ts: require('!!raw-loader?lang=typescript!./charts/radar-chart-demo.ts'),
html: require('!!raw-loader?lang=markup!./charts/radar-chart-demo.html')
},
pieChart: {
heading: 'Pie Chart',
id: 'pieChart',
ts: require('!!raw-loader?lang=typescript!./charts/pie-chart-demo.ts'),
html: require('!!raw-loader?lang=markup!./charts/pie-chart-demo.html')
},
polarChart: {
heading: 'Polar Area Chart',
id: 'polarAreaChart',
ts: require('!!raw-loader?lang=typescript!./charts/polar-area-chart-demo.ts'),
html: require('!!raw-loader?lang=markup!./charts/polar-area-chart-demo.html')
},
baseChart: {
heading: 'Dynamic Chart',
id: 'baseChart',
ts: require('!!raw-loader?lang=typescript!./charts/base-chart-demo.ts'),
html: require('!!raw-loader?lang=markup!./charts/base-chart-demo.html')
}
};
}