Initial CoreUI commit
The initial new codebase from a template
This commit is contained in:
piratefinn
parent
39f90b1897
commit
6f084171dd
511 changed files with 27578 additions and 1649 deletions
20
src/app/chartjs/chartjs-routing.module.ts
Normal file
20
src/app/chartjs/chartjs-routing.module.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { ChartJSComponent } from './chartjs.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: ChartJSComponent,
|
||||
data: {
|
||||
title: 'Charts'
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class ChartJSRoutingModule {}
|
||||
130
src/app/chartjs/chartjs.component.html
Normal file
130
src/app/chartjs/chartjs.component.html
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
<div class="animated fadeIn">
|
||||
<div class="card-columns cols-2">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Line Chart
|
||||
<div class="card-actions">
|
||||
<a href="http://www.chartjs.org">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="lineChartData"
|
||||
[labels]="lineChartLabels"
|
||||
[options]="lineChartOptions"
|
||||
[colors]="lineChartColours"
|
||||
[legend]="lineChartLegend"
|
||||
[chartType]="lineChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Bar Chart
|
||||
<div class="card-actions">
|
||||
<a href="http://www.chartjs.org">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="barChartData"
|
||||
[labels]="barChartLabels"
|
||||
[options]="barChartOptions"
|
||||
[legend]="barChartLegend"
|
||||
[chartType]="barChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Doughnut Chart
|
||||
<div class="card-actions">
|
||||
<a href="http://www.chartjs.org">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[data]="doughnutChartData"
|
||||
[labels]="doughnutChartLabels"
|
||||
[chartType]="doughnutChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Radar Chart
|
||||
<div class="card-actions">
|
||||
<a href="http://www.chartjs.org">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="radarChartData"
|
||||
[labels]="radarChartLabels"
|
||||
[chartType]="radarChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Pie Chart
|
||||
<div class="card-actions">
|
||||
<a href="http://www.chartjs.org">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[data]="pieChartData"
|
||||
[labels]="pieChartLabels"
|
||||
[chartType]="pieChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Polar Area Chart
|
||||
<div class="card-actions">
|
||||
<a href="http://www.chartjs.org">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[data]="polarAreaChartData"
|
||||
[labels]="polarAreaChartLabels"
|
||||
[legend]="polarAreaLegend"
|
||||
[chartType]="polarAreaChartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
97
src/app/chartjs/chartjs.component.ts
Normal file
97
src/app/chartjs/chartjs.component.ts
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'chartjs.component.html'
|
||||
})
|
||||
export class ChartJSComponent {
|
||||
|
||||
// lineChart
|
||||
public lineChartData: Array<any> = [
|
||||
{data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
|
||||
{data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'},
|
||||
{data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C'}
|
||||
];
|
||||
public lineChartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
public lineChartOptions: any = {
|
||||
animation: false,
|
||||
responsive: true
|
||||
};
|
||||
public lineChartColours: Array<any> = [
|
||||
{ // grey
|
||||
backgroundColor: 'rgba(148,159,177,0.2)',
|
||||
borderColor: 'rgba(148,159,177,1)',
|
||||
pointBackgroundColor: 'rgba(148,159,177,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
|
||||
},
|
||||
{ // dark grey
|
||||
backgroundColor: 'rgba(77,83,96,0.2)',
|
||||
borderColor: 'rgba(77,83,96,1)',
|
||||
pointBackgroundColor: 'rgba(77,83,96,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(77,83,96,1)'
|
||||
},
|
||||
{ // grey
|
||||
backgroundColor: 'rgba(148,159,177,0.2)',
|
||||
borderColor: 'rgba(148,159,177,1)',
|
||||
pointBackgroundColor: 'rgba(148,159,177,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
|
||||
}
|
||||
];
|
||||
public lineChartLegend = true;
|
||||
public lineChartType = 'line';
|
||||
|
||||
// barChart
|
||||
public barChartOptions: any = {
|
||||
scaleShowVerticalLines: false,
|
||||
responsive: true
|
||||
};
|
||||
public barChartLabels: string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
|
||||
public barChartType = 'bar';
|
||||
public barChartLegend = true;
|
||||
|
||||
public barChartData: any[] = [
|
||||
{data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
|
||||
{data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'}
|
||||
];
|
||||
|
||||
// Doughnut
|
||||
public doughnutChartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales'];
|
||||
public doughnutChartData: number[] = [350, 450, 100];
|
||||
public doughnutChartType = 'doughnut';
|
||||
|
||||
// Radar
|
||||
public radarChartLabels: string[] = ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'];
|
||||
|
||||
public radarChartData: any = [
|
||||
{data: [65, 59, 90, 81, 56, 55, 40], label: 'Series A'},
|
||||
{data: [28, 48, 40, 19, 96, 27, 100], label: 'Series B'}
|
||||
];
|
||||
public radarChartType = 'radar';
|
||||
|
||||
// Pie
|
||||
public pieChartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
|
||||
public pieChartData: number[] = [300, 500, 100];
|
||||
public pieChartType = 'pie';
|
||||
|
||||
// PolarArea
|
||||
public polarAreaChartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail Sales', 'Telesales', 'Corporate Sales'];
|
||||
public polarAreaChartData: number[] = [300, 500, 100, 40, 120];
|
||||
public polarAreaLegend = true;
|
||||
|
||||
public polarAreaChartType = 'polarArea';
|
||||
|
||||
// events
|
||||
public chartClicked(e: any): void {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
public chartHovered(e: any): void {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
}
|
||||
14
src/app/chartjs/chartjs.module.ts
Normal file
14
src/app/chartjs/chartjs.module.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { ChartsModule } from 'ng2-charts/ng2-charts';
|
||||
|
||||
import { ChartJSComponent } from './chartjs.component';
|
||||
import { ChartJSRoutingModule } from './chartjs-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
ChartJSRoutingModule,
|
||||
ChartsModule
|
||||
],
|
||||
declarations: [ ChartJSComponent ]
|
||||
})
|
||||
export class ChartJSModule { }
|
||||
Reference in a new issue