Skip to content

GitLab

Commit f3a6a630 authored by David Anderson's avatar David Anderson
Browse files

tslint

parent 755555f6
Hide whitespace changes
Inline Side-by-side
demo-angularIO/src/app/app-routing.module.ts
View file @ f3a6a630
......@@ -7,54 +7,54 @@ import { ScatterChartDemoComponent } from './scatterchart-demo/scatterchart-demo
import { AreaChartDemoComponent } from './areachart-demo/areachart-demo.component';
import { LineChartDemoComponent } from './linechart-demo/linechart-demo.component';
import { DemoAppComponent } from './demo-app/demo-app.component';
import { NgModule } from '@angular/core';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
@NgModule({
imports: [
RouterModule.forRoot( [
{
path: 'gistcharts',
component: DemoAppComponent,
},
{
path: 'line',
component: LineChartDemoComponent,
},
{
path: 'area',
component: AreaChartDemoComponent,
},
{
path: 'scatter',
component: ScatterChartDemoComponent,
},
{
path: 'bar',
component: BarChartDemoComponent,
},
{
path: 'heatMap',
component: HeatmapChartDemoComponent,
},
{
path: 'boxplot',
component: BoxplotDemoComponent,
},
{
path: 'radial',
component: RadialChartDemoComponent,
},
{
path: 'resize',
component: ResizeableChartDemoComponent,
},
{
path: '**',
redirectTo: 'gistcharts'
}
] )
],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
\ No newline at end of file
@NgModule( {
imports: [
RouterModule.forRoot( [
{
path: 'gistcharts',
component: DemoAppComponent,
},
{
path: 'line',
component: LineChartDemoComponent,
},
{
path: 'area',
component: AreaChartDemoComponent,
},
{
path: 'scatter',
component: ScatterChartDemoComponent,
},
{
path: 'bar',
component: BarChartDemoComponent,
},
{
path: 'heatMap',
component: HeatmapChartDemoComponent,
},
{
path: 'boxplot',
component: BoxplotDemoComponent,
},
{
path: 'radial',
component: RadialChartDemoComponent,
},
{
path: 'resize',
component: ResizeableChartDemoComponent,
},
{
path: '**',
redirectTo: 'gistcharts'
}
] )
],
exports: [ RouterModule ]
} )
export class AppRoutingModule { }
demo-angularIO/src/app/app.component.css
View file @ f3a6a630
:host {
display: block;
height: 100%;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
display: block;
height: 100%;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
}
.active-link {
background: rgb(63, 81, 181);
color: white;
}
.active-link{
background: rgb( 63, 81, 181);
color:white;
}
\ No newline at end of file
demo-angularIO/src/app/app.component.ts
View file @ f3a6a630
import { Component } from '@angular/core';
@Component({
@Component( {
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
styleUrls: [ './app.component.css' ]
} )
export class AppComponent {
title = 'app';
}
demo-angularIO/src/app/app.module.ts
View file @ f3a6a630
......@@ -13,14 +13,14 @@ import { RadialChartDemoComponent } from './radialchart-demo/radialchart-demo.co
import { ScatterChartDemoComponent } from './scatterchart-demo/scatterchart-demo.component';
import { AppRoutingModule } from './/app-routing.module';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatCardModule} from '@angular/material/card';
let materialItems = [MatToolbarModule,MatCardModule];
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatCardModule } from '@angular/material/card';
const materialItems = [ MatToolbarModule, MatCardModule ];
import {FlexLayoutModule} from '@angular/flex-layout';
import { FlexLayoutModule } from '@angular/flex-layout';
import { FormsModule } from '@angular/forms';
@NgModule({
@NgModule( {
declarations: [
AppComponent,
AreaChartDemoComponent,
......@@ -38,9 +38,9 @@ import { FormsModule } from '@angular/forms';
FormsModule,
AppRoutingModule,
FlexLayoutModule
].concat(materialItems),
].concat( materialItems ),
exports: materialItems,
providers: [],
bootstrap: [AppComponent]
})
bootstrap: [ AppComponent ]
} )
export class AppModule { }
demo-angularIO/src/app/areachart-demo/areachart-demo.component.ts
View file @ f3a6a630
......@@ -7,38 +7,40 @@ import {
, GetDataAtMouseEvent
, DataPoint
} from 'gist-charts';
import { Component, ViewChild, ElementRef } from '@angular/core';
import { Component, ViewChild, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
let yMin = 0;
let yMax = 100;
let pointCount = 40;
let lineCount = 2;
const yMin = 0;
const yMax = 100;
const pointCount = 40;
const lineCount = 1;
@Component( {
selector: 'app-areachart-demo',
templateUrl: './areachart-demo.component.html',
styleUrls: [ './areachart-demo.component.css' ]
} )
export class AreaChartDemoComponent {
export class AreaChartDemoComponent implements AfterViewInit, OnDestroy {
intervals: number[] = [];
@ViewChild( 'drawspace' )
drawspace: ElementRef;
ngAfterViewInit() {
let me = this;
let leftAxis: ContinuousAxis = new ContinuousAxis( 'left' );
let bottomAxis: ContinuousAxis = new ContinuousAxis( 'bottom' );
const me = this;
const leftAxis: ContinuousAxis = new ContinuousAxis( 'left' );
const bottomAxis: ContinuousAxis = new ContinuousAxis( 'bottom' );
let gistChart = new ChartCanvas( me.drawspace.nativeElement );
let activeChart = new AreaChart();
const gistChart = new ChartCanvas( me.drawspace.nativeElement );
const activeChart = new AreaChart();
gistChart.background = '#ccc';
activeChart.axisOrigin = yMin;
activeChart.fillAxis = leftAxis;
activeChart.getStyle = ( dp: LineChartData ) => {
let ret = new CanvasStyle();
const ret = new CanvasStyle();
ret.stroke = dp.data.stroke;
ret.fill = dp.data.fill;
ret.lineDash = [ 3, 3 ];
......@@ -48,16 +50,16 @@ export class AreaChartDemoComponent {
leftAxis.shouldExtendTicksAcrossChart = true;
bottomAxis.shouldExtendTicksAcrossChart = true;
bottomAxis.getValue = ( dp ) => { return dp.data.x; };
leftAxis.getValue = ( dp ) => { return dp.data.y; };
bottomAxis.getValue = ( dp ) => dp.data.x;
leftAxis.getValue = ( dp ) => dp.data.y;
bottomAxis.valueToString = ( value ) => { return Math.round( value ).toString(); };
leftAxis.valueToString = ( value ) => { return value.toString(); };
bottomAxis.valueToString = ( value ) => Math.round( value ).toString();
leftAxis.valueToString = ( value ) => value.toString();
leftAxis.label = 'left axis';
bottomAxis.label = 'bottom axis';
bottomAxis.explicitBounds =[ 0, pointCount ];
bottomAxis.explicitBounds = [ 0, pointCount ];
leftAxis.explicitBounds = [ yMin, yMax ];
......@@ -77,9 +79,9 @@ export class AreaChartDemoComponent {
let dpl: DataPoint[] = [];
reports.forEach( r => {
dpl = dpl.concat( r.dpl );
});
} );
if (!dpl.length ) {
if ( !dpl.length ) {
console.info( 'no data ' );
return;
}
......@@ -87,7 +89,6 @@ export class AreaChartDemoComponent {
}
},
) );
activeChart.datalist( randomLineData( ) );
gistChart.beginRender();
function draw() {
......@@ -98,7 +99,6 @@ export class AreaChartDemoComponent {
draw();
// me.intervals.push( window.setInterval( draw, 1000 * 1 ) );
}
intervals: number[] = [];
ngOnDestroy() {
this.intervals.forEach( int => {
window.clearInterval( int );
......@@ -107,18 +107,18 @@ export class AreaChartDemoComponent {
}
function randomLineData(): Array<LineChartData> {
let ret: Array<LineChartData> = [];
let yDiff = yMax - yMin;
const ret: Array<LineChartData> = [];
const yDiff = yMax - yMin;
while ( ret.length < lineCount ) {
let lcdp = new LineChartData();
const lcdp = new LineChartData();
lcdp.data = {
stroke: 'rgb(' + randomInt( 0, 255 ) + ',' + randomInt( 0, 255 ) + ',' + randomInt( 0, 255 ) + ' )',
fill: 'rgb(' + randomInt( 0, 255 ) + ',' + randomInt( 0, 255 ) + ',' + randomInt( 0, 255 ) + ' )'
};
let last = randomInt( yMin, yMax );
while ( lcdp.points.length < pointCount ) {
let dp = new DataPoint();
let diff = last * 0.5;
const dp = new DataPoint();
const diff = last * 0.5;
last = randomInt( last - diff, last + diff );
if ( last > yMax ) {
last = yMin + yDiff * 0.75;
......@@ -128,7 +128,7 @@ function randomLineData(): Array<LineChartData> {
}
dp.data = {
x: lcdp.points.length,
y: last
y: lcdp.points.length
};
lcdp.points.push( dp );
......@@ -140,26 +140,26 @@ function randomLineData(): Array<LineChartData> {
function areaLineData(): LineChartData {
let ret = new LineChartData();
const ret = new LineChartData();
ret.data = {
stroke: '#333',
fill: 'ccc'
}
};
let yDiff = yMax - yMin;
const yDiff = yMax - yMin;
let topPoints: DataPoint[] = [];
let bottomPoints: DataPoint[] = [];
const topPoints: DataPoint[] = [];
const bottomPoints: DataPoint[] = [];
for ( let i = 0; i < pointCount; i++ ) {
topPoints.push( new DataPoint( {
x: i,
y: yMin + yMax * 0.75
}) );
bottomPoints.push( new DataPoint({
} ) );
bottomPoints.push( new DataPoint( {
x: i,
y: yMin + yMax * 0.25
}) );
} ) );
}
ret.points = topPoints.concat( bottomPoints.reverse() );
......@@ -169,6 +169,6 @@ function areaLineData(): LineChartData {
}
function randomInt( min: number, max: number ): number {
let diff = max - min;
const diff = max - min;
return Math.round( Math.random() * diff + min );
}
\ No newline at end of file
}
demo-angularIO/src/app/barchart-demo/barchart-demo.component.ts
View file @ f3a6a630
import { CanvasStyle
, GetDataAtMouseEvent
, DataPoint
, BarChart
, ContinuousAxis
, CategoricalAxis
, ChartCanvas } from 'gist-charts';
import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
selector: 'app-barchart-demo',
templateUrl: './barchart-demo.component.html',
styleUrls: ['./barchart-demo.component.css']
})
export class BarChartDemoComponent {
@ViewChild( 'drawspace' )
drawspace: ElementRef;
chart: ChartCanvas;
ngAfterViewInit() {
let me = this;
let barChart = new BarChart();
barChart.getStyle = ( dp ) => {
let ret = new CanvasStyle();
ret.stroke = dp.data.stroke;
ret.fill = dp.data.fill;
return ret;
};
let leftAxis: CategoricalAxis<string> = new CategoricalAxis<string>( 'left' );
let topAxis: ContinuousAxis = new ContinuousAxis( 'top' );
barChart.getX2 = ( dp: DataPoint ) => { return dp.data.testScore + dp.data.hitCount; };
me.chart = new ChartCanvas( me.drawspace.nativeElement );
me.chart.addBehavior( new GetDataAtMouseEvent(
'click',
{
chart: barChart,
onEvent: ( reports ) => {
let dpl: DataPoint[] = [];
import {
CanvasStyle
, GetDataAtMouseEvent
, DataPoint
, BarChart
, ContinuousAxis
, CategoricalAxis
, ChartCanvas
} from 'gist-charts';
import { Component, ViewChild, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
@Component( {
selector: 'app-barchart-demo',
templateUrl: './barchart-demo.component.html',
styleUrls: [ './barchart-demo.component.css' ]
} )
export class BarChartDemoComponent implements AfterViewInit, OnDestroy {
@ViewChild( 'drawspace' )
drawspace: ElementRef;
chart: ChartCanvas;
intervals: number[] = [];
ngAfterViewInit() {
const me = this;
const barChart = new BarChart();
barChart.getStyle = ( dp ) => {
const ret = new CanvasStyle();
ret.stroke = dp.data.stroke;
ret.fill = dp.data.fill;
return ret;
};
const leftAxis: CategoricalAxis<string> = new CategoricalAxis<string>( 'left' );
const topAxis: ContinuousAxis = new ContinuousAxis( 'top' );
barChart.getX2 = ( dp: DataPoint ) => dp.data.testScore + dp.data.hitCount;
me.chart = new ChartCanvas( me.drawspace.nativeElement );
me.chart.addBehavior( new GetDataAtMouseEvent(
'click',
{
chart: barChart,
onEvent: ( reports ) => {
const dpl: DataPoint[] = [];
reports.forEach( r => dpl.push( ...r.dpl ) );
if (!dpl.length ) {
if ( !dpl.length ) {
console.info( 'no data ' );
return;
}
console.info( dpl );
}
},
) );
leftAxis.registerChart( barChart );
topAxis.registerChart( barChart );
topAxis.getValue = ( dp: DataPoint ): number => { return dp.data.testScore; };
leftAxis.getValue = ( dp ): any => { return dp.data.groupName; };
topAxis.explicitBounds =[ -5, 5 ];
topAxis.label = 'top axis';
me.chart.addChart( [ barChart ] );
me.chart.addAxis( [ leftAxis, topAxis ] );
function draw() {
let dl = randomStacked();
leftAxis.resetZoom();
let hitMap:any = {};
leftAxis.explicitCategories = dl
.map( dp => dp.data.groupName )
.filter( str => {
let ret = !hitMap[ str ];
hitMap[ str ] = true;
return ret;
} );
barChart.datalist( randomStacked() );
me.chart.beginRender();
}
draw();
// me.intervals.push( window.setInterval( draw, 1000 * 3 ) );
}
intervals: number[] = [];
ngOnDestroy() {
this.intervals.forEach( int => {
window.clearInterval( int );
} );
}
}
},
) );
leftAxis.registerChart( barChart );
topAxis.registerChart( barChart );
topAxis.getValue = ( dp: DataPoint ): number => dp.data.testScore;
leftAxis.getValue = ( dp ): any => dp.data.groupName;
topAxis.explicitBounds = [ -5, 5 ];
topAxis.label = 'top axis';
me.chart.addChart( [ barChart ] );
me.chart.addAxis( [ leftAxis, topAxis ] );
function draw() {
const dl = randomStacked();
leftAxis.resetZoom();
const hitMap: any = {};
leftAxis.explicitCategories = dl
.map( dp => dp.data.groupName )
.filter( str => {
const ret = !hitMap[ str ];
hitMap[ str ] = true;
return ret;
} );
barChart.datalist( randomStacked() );
me.chart.beginRender();
}
draw();
// me.intervals.push( window.setInterval( draw, 1000 * 3 ) );
}
ngOnDestroy() {
this.intervals.forEach( int => {
window.clearInterval( int );
} );
}
}
function randomStacked(): Array<DataPoint> {
// let groupCount = Math.floor(Math.random() * 20) +k1;
let groupCount = 5;
let rects = 5;
let bcdp: Array<DataPoint> = [];
bcdp.length = rects * groupCount;
let tmpArr = [ 'blue', 'green', 'grey', 'black', 'brown', 'yellow', 'orange', 'purple', 'pink', 'red' ];
for ( let i = 0; i < groupCount; i++ ) {
for ( let j = 0; j < rects; j++ ) {
let dp = new DataPoint();
dp.data = {
groupName: 'Group ' + ( i + 1 ),
testScore: j,
hitCount: 1,
fill: tmpArr[ j % tmpArr.length],
stroke: tmpArr[ j % tmpArr.length]
};
if ( i % 2 ) {
dp.data.testScore *= -1;
dp.data.hitCount *= -1;
}
bcdp[ i * rects + j ] = dp;
}
}
return bcdp;
// let groupCount = Math.floor(Math.random() * 20) +k1;
const groupCount = 5;
const rects = 5;
const bcdp: Array<DataPoint> = [];
bcdp.length = rects * groupCount;
const tmpArr = [ 'blue', 'green', 'grey', 'black', 'brown', 'yellow', 'orange', 'purple', 'pink', 'red' ];
for ( let i = 0; i < groupCount; i++ ) {
for ( let j = 0; j < rects; j++ ) {
const dp = new DataPoint();
dp.data = {
groupName: 'Group ' + ( i + 1 ),
testScore: j,
hitCount: 1,
fill: tmpArr[ j % tmpArr.length ],
stroke: tmpArr[ j % tmpArr.length ]
};
if ( i % 2 ) {