Skip to content

GitLab

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

Merge branch 'develop'

parents 30e06206 88911b25
Hide whitespace changes
Inline Side-by-side
.vscode/tasks.json
View file @ cb6df171
......@@ -19,7 +19,8 @@
"group": {
"kind": "build",
"isDefault": true
}
},
"problemMatcher": []
}
]
}
\ No newline at end of file
demo-angularIO/src/app/app-routing.module.ts
View file @ cb6df171
import { ResizeableChartDemoComponent } from './resizeable-demo/resizeable-demo.component';
import { RadialChartDemoComponent } from './radialchart-demo/radialchart-demo.component';
import { BoxplotDemoComponent } from './boxplot-demo/boxplot-demo.component';
import { PlaygroundDemoComponent } from './playground-demo/playground-demo.component';
import { HeatmapChartDemoComponent } from './heatmapchart-demo/heatmapchart-demo.component';
import { BarChartDemoComponent } from './barchart-demo/barchart-demo.component';
import { ScatterChartDemoComponent } from './scatterchart-demo/scatterchart-demo.component';
......@@ -37,10 +37,6 @@ import { RouterModule, Routes } from '@angular/router';
path: 'heatMap',
component: HeatmapChartDemoComponent,
},
{
path: 'playground',
component: PlaygroundDemoComponent,
},
{
path: 'boxplot',
component: BoxplotDemoComponent,
......@@ -48,6 +44,10 @@ import { RouterModule, Routes } from '@angular/router';
{
path: 'radial',
component: RadialChartDemoComponent,
},
{
path: 'resize',
component: ResizeableChartDemoComponent,
},
{
path: '**',
......
demo-angularIO/src/app/app.component.html
View file @ cb6df171
......@@ -10,10 +10,6 @@
mat-raised-button
routerLinkActive="active-link"
routerLink="gistcharts">All</a>
<a fxFlex="initial"
mat-raised-button
routerLinkActive="active-link"
routerLink="playground">Playground</a>
<a fxFlex="initial"
mat-raised-button
routerLinkActive="active-link"
......@@ -42,6 +38,11 @@
mat-raised-button
routerLinkActive="active-link"
routerLink="radial">Radial</a>
<a fxFlex="initial"
mat-raised-button
routerLinkActive="active-link"
routerLink="resize">Resize Test</a>
</nav>
</mat-toolbar>
<div fxLayout="column"
......
demo-angularIO/src/app/app.module.ts
View file @ cb6df171
import { ResizeableChartDemoComponent } from './resizeable-demo/resizeable-demo.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
......@@ -8,7 +9,6 @@ import { BoxplotDemoComponent } from './boxplot-demo/boxplot-demo.component';
import { DemoAppComponent } from './demo-app/demo-app.component';
import { HeatmapChartDemoComponent } from './heatmapchart-demo/heatmapchart-demo.component';
import { LineChartDemoComponent } from './linechart-demo/linechart-demo.component';
import { PlaygroundDemoComponent } from './playground-demo/playground-demo.component';
import { RadialChartDemoComponent } from './radialchart-demo/radialchart-demo.component';
import { ScatterChartDemoComponent } from './scatterchart-demo/scatterchart-demo.component';
import { AppRoutingModule } from './/app-routing.module';
......@@ -18,6 +18,7 @@ import {MatCardModule} from '@angular/material/card';
let materialItems = [MatToolbarModule,MatCardModule];
import {FlexLayoutModule} from '@angular/flex-layout';
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
......@@ -28,12 +29,13 @@ import {FlexLayoutModule} from '@angular/flex-layout';
DemoAppComponent,
HeatmapChartDemoComponent,
LineChartDemoComponent,
PlaygroundDemoComponent,
RadialChartDemoComponent,
ScatterChartDemoComponent
ScatterChartDemoComponent,
ResizeableChartDemoComponent
],
imports: [
BrowserModule,
FormsModule,
AppRoutingModule,
FlexLayoutModule
].concat(materialItems),
......
demo-angularIO/src/app/areachart-demo/areachart-demo.component.ts
View file @ cb6df171
import {
CanvasStyle
, LineChartData
, AreaChartConfig
, ContinuousAxisConfig
, GistChart
, AreaChart
, ContinuousAxis
, ChartCanvas
, GetDataAtMouseEvent
, DataPoint
} from 'gist-charts';
......@@ -27,15 +27,17 @@ export class AreaChartDemoComponent {
ngAfterViewInit() {
let me = this;
let leftAxis: ContinuousAxisConfig = new ContinuousAxisConfig( 'left' );
let bottomAxis: ContinuousAxisConfig = new ContinuousAxisConfig( 'bottom' );
let leftAxis: ContinuousAxis = new ContinuousAxis( 'left' );
let bottomAxis: ContinuousAxis = new ContinuousAxis( 'bottom' );
let gistChart = new GistChart( me.drawspace.nativeElement );
let activeChart = new AreaChartConfig();
let gistChart = new ChartCanvas( me.drawspace.nativeElement );
let activeChart = new AreaChart();
gistChart.background = '#ccc';
activeChart.getAreaStyle = ( dp: LineChartData ) => {
activeChart.axisOrigin = yMin;
activeChart.getStyle = ( dp: LineChartData ) => {
let ret = new CanvasStyle();
ret.stroke = dp.data.stroke;
ret.fill = dp.data.fill;
......@@ -43,8 +45,8 @@ export class AreaChartDemoComponent {
return ret;
};
leftAxis.shouldDrawGridLines = true;
bottomAxis.shouldDrawGridLines = true;
leftAxis.shouldExtendTicksAcrossChart = true;
bottomAxis.shouldExtendTicksAcrossChart = true;
bottomAxis.getValue = ( dp ) => { return dp.data.x; };
leftAxis.getValue = ( dp ) => { return dp.data.y; };
......@@ -55,15 +57,12 @@ export class AreaChartDemoComponent {
leftAxis.label = 'left axis';
bottomAxis.label = 'bottom axis';
bottomAxis.explicitMinValue = 0;
bottomAxis.explicitMaxValue = pointCount;
leftAxis.explicitMinValue = yMin;
leftAxis.explicitMaxValue = yMax;
bottomAxis.explicitBounds =[ 0, pointCount ];
leftAxis.explicitBounds = [ yMin, yMax ];
leftAxis.registerChartConfig( activeChart );
bottomAxis.registerChartConfig( activeChart );
leftAxis.registerChart( activeChart );
bottomAxis.registerChart( activeChart );
gistChart.addChart( activeChart );
gistChart.addAxis( [
leftAxis
......@@ -73,10 +72,14 @@ export class AreaChartDemoComponent {
gistChart.addBehavior( new GetDataAtMouseEvent(
'click',
{
config: activeChart,
onEvent: ( dpl: DataPoint[] ) => {
let first = dpl[ 0 ];
if ( !first ) {
chart: activeChart,
onEvent: ( reports ) => {
let dpl: DataPoint[] = [];
reports.forEach( r => {
dpl = dpl.concat( r.dpl );
});
if (!dpl.length ) {
console.info( 'no data ' );
return;
}
......@@ -85,7 +88,7 @@ export class AreaChartDemoComponent {
},
) );
activeChart.datalist( randomLineData( ) );
gistChart.renderAll();
gistChart.beginRender();
function draw() {
activeChart.datalist().push( ...randomLineData() );
......
demo-angularIO/src/app/barchart-demo/barchart-demo.component.ts
View file @ cb6df171
import { CanvasStyle
, GetDataAtMouseEvent
, DataPoint
, BarChartConfig
, ContinuousAxisConfig
, CategoricalAxisConfig
, GistChart } from 'gist-charts';
, BarChart
, ContinuousAxis
, CategoricalAxis
, ChartCanvas } from 'gist-charts';
import { Component, ViewChild, ElementRef } from '@angular/core';
......@@ -16,44 +16,46 @@ import { Component, ViewChild, ElementRef } from '@angular/core';
export class BarChartDemoComponent {
@ViewChild( 'drawspace' )
drawspace: ElementRef;
chart: GistChart;
chart: ChartCanvas;
ngAfterViewInit() {
let me = this;
let barChart = new BarChartConfig();
barChart.getBarStyle = ( dp ) => {
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: CategoricalAxisConfig<string> = new CategoricalAxisConfig<string>( 'left' );
let topAxis: ContinuousAxisConfig = new ContinuousAxisConfig( 'top' );
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 GistChart( me.drawspace.nativeElement );
me.chart = new ChartCanvas( me.drawspace.nativeElement );
me.chart.addBehavior( new GetDataAtMouseEvent(
'click',
{
config: barChart,
onEvent: ( dpl: DataPoint[] ) => {
let first = dpl[ 0 ];
if ( !first ) {
return;
}
console.info( dpl );
chart: barChart,
onEvent: ( reports ) => {
let dpl: DataPoint[] = [];
reports.forEach( r => dpl.push( ...r.dpl ) );
if (!dpl.length ) {
console.info( 'no data ' );
return;
}
console.info( dpl );
}
},
) );
leftAxis.registerChartConfig( barChart );
topAxis.registerChartConfig( barChart );
leftAxis.registerChart( barChart );
topAxis.registerChart( barChart );
topAxis.getValue = ( dp: DataPoint ): number => { return dp.data.testScore; };
leftAxis.getValue = ( dp ): any => { return dp.data.groupName; };
topAxis.explicitMinValue = -5;
topAxis.explicitMaxValue = 5;
topAxis.explicitBounds =[ -5, 5 ];
topAxis.label = 'top axis';
me.chart.addChart( [ barChart ] );
......@@ -61,7 +63,7 @@ export class BarChartDemoComponent {
function draw() {
let dl = randomStacked();
leftAxis.zoomable = false;
leftAxis.resetZoom();
let hitMap:any = {};
leftAxis.explicitCategories = dl
......@@ -73,9 +75,8 @@ export class BarChartDemoComponent {
} );
barChart.datalist( randomStacked() );
leftAxis.reverseOrder = !leftAxis.reverseOrder;
me.chart.renderAll();
me.chart.beginRender();
}
draw();
......
demo-angularIO/src/app/boxplot-demo/boxplot-demo.component.ts
View file @ cb6df171
......@@ -3,11 +3,11 @@ import {
, GetDataAtMouseEvent
, DataPoint
, BoxPlotData
, BoxPlotConfig
, ContinuousAxisConfig
, CategoricalAxisConfig
, GistChart
, ScatterChartConfig,
, BoxPlot
, ContinuousAxis
, CategoricalAxis
, ChartCanvas
, ScatterChart,
ScatterStyle
} from 'gist-charts';
import { Component, ViewChild, ElementRef } from '@angular/core';
......@@ -16,6 +16,8 @@ let min = 0;
let max = 1000;
let boxCount = 10;
let isVertical = false;
let isCategorical = true;
let shouldAxisBeNormal = !true;
@Component({
selector: 'app-boxplot-demo',
......@@ -25,52 +27,62 @@ let isVertical = false;
export class BoxplotDemoComponent {
@ViewChild( 'drawSpace' )
drawSpace: ElementRef;
protected chart: GistChart;
protected chart: ChartCanvas;
x
ngAfterViewInit() {
let me = this;
me.chart = new ChartCanvas( me.drawSpace.nativeElement );
let primaryAxis, secondaryAxis;
if ( isVertical ) {
primaryAxis = new ContinuousAxisConfig( 'left' );
secondaryAxis = new CategoricalAxisConfig<number>( 'bottom' );
// secondaryAxis = new ContinuousAxisConfig( 'bottom' );
primaryAxis = new ContinuousAxis( shouldAxisBeNormal ? 'left' : 'right' );
secondaryAxis = isCategorical ? new CategoricalAxis<number>( shouldAxisBeNormal ? 'bottom' : 'top' ) : new ContinuousAxis( shouldAxisBeNormal ? 'bottom' : 'top' );
} else {
primaryAxis = new ContinuousAxisConfig( 'bottom' );
secondaryAxis = new CategoricalAxisConfig<number>( 'left' );
// secondaryAxis = new ContinuousAxisConfig( 'left' );
primaryAxis = new ContinuousAxis( shouldAxisBeNormal ? 'bottom' : 'top' );
secondaryAxis = isCategorical ? new CategoricalAxis<number>( shouldAxisBeNormal ? 'left' : 'right' ) : new ContinuousAxis( shouldAxisBeNormal ? 'left' : 'right' );
}
secondaryAxis.valueToWidth = () => { return 20; };
let boxPlot = new BoxPlotConfig();
let boxPlot = new BoxPlot();
boxPlot.primaryAxis = primaryAxis;
boxPlot.secondaryAxis = secondaryAxis;
let scatterChart = new ScatterChartConfig();
let scatterChart = new ScatterChart();
scatterChart.margin = 20;
me.chart.background = '#ccc';
boxPlot.background = '#333';
scatterChart.shouldCenterBandY = true;
// boxPlot.shouldCenterBandY = true;
secondaryAxis.color = primaryAxis.color = 'steelblue';
if ( !isCategorical ) {
boxPlot.shouldCenterBandY = true;
boxPlot.getBandThickness = () => {
return 20;
};
}
primaryAxis.explicitBounds = [min, max];
primaryAxis.explicitMinValue = min;
primaryAxis.explicitMaxValue = max;
secondaryAxis.explicitCategories = [];
secondaryAxis.explicitBounds = [ 0, boxCount ];
secondaryAxis.innerPadding = 0.25;
secondaryAxis.outerPadding = 0.25;
while ( secondaryAxis.explicitCategories.length < boxCount ) {
secondaryAxis.explicitCategories.push( secondaryAxis.explicitCategories.length );
}
me.chart = new GistChart( me.drawSpace.nativeElement );
me.chart.addBehavior( new GetDataAtMouseEvent(
'click',
{
config: boxPlot,
onEvent: ( dpl: DataPoint[], config: BoxPlotConfig ) => {
let first = dpl[ 0 ];
if ( !first ) {
return;
}
console.info( `You are hovering over ${ dpl.length } points in Chart ${ config.id }.` );
chart: boxPlot,
onEvent: ( reports ) => {
reports
.filter( r => r.dpl.length > 0 )
.forEach( r => console.info( `You are hovering over ${ r.dpl.length } points in Chart ${ r.chart.id }.` ) );
}
} as any
) );
......@@ -80,11 +92,11 @@ export class BoxplotDemoComponent {
return ret;
};
secondaryAxis.getValue = ( dp ) => {
let ret = dp.data.y;
let ret = dp.data.y;
return ret;
};
primaryAxis.registerChartConfig( [ boxPlot, scatterChart ] );
secondaryAxis.registerChartConfig( [ boxPlot, scatterChart ] );
primaryAxis.registerChart( [ boxPlot, scatterChart ] );
secondaryAxis.registerChart( [ boxPlot, scatterChart ] );
me.chart.addChart( [ boxPlot, scatterChart ] );
me.chart.addAxis( [ primaryAxis, secondaryAxis ] );
......@@ -96,7 +108,7 @@ export class BoxplotDemoComponent {
} ) );
};
boxPlot.getBoxStyle = ( box ) => {
boxPlot.getStyle = ( box ) => {
let ret = new BoxPlotStyle();
ret.stroke = box.data.stroke;
ret.fill = box.data.fill;
......@@ -105,12 +117,12 @@ export class BoxplotDemoComponent {
};
let outlierStyle = new ScatterStyle( '#333', undefined, 3 );
scatterChart.getScatterStyle = () => outlierStyle;
scatterChart.getStyle = () => outlierStyle;
function draw() {
boxPlot.datalist( randomData() );
me.chart.renderAll();
me.chart.beginRender();
}
draw();
......
demo-angularIO/src/app/demo-app/demo-app.component.html
View file @ cb6df171
......@@ -2,7 +2,6 @@
fxLayoutGap="10px "
fxLayoutAlign="start stretch">
<app-playground-demo fxFlex="auto"></app-playground-demo>
<app-scatterchart-demo fxFlex="auto"></app-scatterchart-demo>
<app-barchart-demo fxFlex="auto"></app-barchart-demo>
<app-heatmapchart-demo fxFlex="auto"></app-heatmapchart-demo>
......
demo-angularIO/src/app/heatmapchart-demo/heatmapchart-demo.component.ts
View file @ cb6df171
import {
CanvasStyle
, GistChartLayout
, GetDataAtMouseEvent
, CategoricalAxisConfig
, CategoricalAxis
, DataPoint
, GistChart
, BarChartConfig
, ChartCanvas
, BarChart
} from 'gist-charts';
import { ViewChild, Component, ElementRef } from '@angular/core';
/* cSpell:words bcdp heatmapchart */
......@@ -21,14 +20,14 @@ let yLimit = 100;
export class HeatmapChartDemoComponent{
@ViewChild( 'drawspace' )
drawspace: ElementRef;
chart: GistChart;
chart: ChartCanvas;
ngAfterViewInit() {
let me = this;
me.chart = new GistChart( me.drawspace.nativeElement );
me.chart = new ChartCanvas( me.drawspace.nativeElement );
let barChart = new BarChartConfig();
barChart.getBarStyle = ( dp ) => {
let barChart = new BarChart();
barChart.getStyle = ( dp ) => {
let ret = new CanvasStyle();
ret.stroke = dp.data.stroke;
ret.fill = dp.data.fill;
......@@ -40,38 +39,39 @@ export class HeatmapChartDemoComponent{
// me.chart.debugLogger.isEnabled = true;
me.chart.debugLogger.logPrefix = 'HeatMapDemo gistChart';
let leftAxis: CategoricalAxisConfig<string> = new CategoricalAxisConfig<string>( 'left' );
let rightAxis: CategoricalAxisConfig<string> = new CategoricalAxisConfig<string>( 'right' );
let topAxis: CategoricalAxisConfig<number> = new CategoricalAxisConfig<number>( 'top' );
let bottomAxis: CategoricalAxisConfig<number> = new CategoricalAxisConfig<number>( 'bottom' );
let leftAxis: CategoricalAxis<string> = new CategoricalAxis<string>( 'left' );
let rightAxis: CategoricalAxis<string> = new CategoricalAxis<string>( 'right' );
let topAxis: CategoricalAxis<number> = new CategoricalAxis<number>( 'top' );
let bottomAxis: CategoricalAxis<number> = new CategoricalAxis<number>( 'bottom' );
me.chart.layout = new GistChartLayout();
me.chart.background = '#333';
me.chart.layout.minHeight = 1000;
me.chart.layout.minWidth = 1000;
me.chart.layout.minMargin.setValues( 100 );
me.chart.layout.chartHeight.min = 1000;
me.chart.layout.chartWidth.min = 1000;
me.chart.layout.setAllMargins( 100 );
let axisList = [ topAxis, bottomAxis, leftAxis, rightAxis ];
me.chart.addBehavior( new GetDataAtMouseEvent(
'click',
{
config: barChart,
onEvent: ( dpl: DataPoint[] ) => {
let first = dpl[ 0 ];
if ( !first ) {
return;
}
console.info( first.getExtent(barChart) );
chart: barChart,
onEvent: ( reports ) => {
let dpl: DataPoint[] = [];
reports.forEach( r => dpl.push( ...r.dpl ) );
if (!dpl.length ) {
console.info( 'no data ' );
return;
}
console.info( dpl );
}
},
) );
axisList.forEach( axis => {
axis.getCategorySize = () => 30;
axis.registerChartConfig( barChart );
axis.registerChart( barChart );
} );
bottomAxis.getValue = topAxis.getValue = ( dp ): number => { return dp.data.y; };
......@@ -102,9 +102,7 @@ export class HeatmapChartDemoComponent{
function draw() {
let data = randomData().sort( function () { return 0; } );
barChart.datalist( data );
me.chart.renderAll();
console.log( 'render all ' );
me.chart.renderAll();
me.chart.beginRender();
}
draw();
......
demo-angularIO/src/app/linechart-demo/linechart-demo.component.spec.ts
View file @ cb6df171
import { LineChartDemoComponent } from './linechart-demo.component';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { LinechartDemoComponent } from './linechart-demo.component';
describe('LinechartDemoComponent', () => {
let component: LinechartDemoComponent;
let fixture: ComponentFixture<LinechartDemoComponent>;
describe('LineChartDemoComponent', () => {
let component: LineChartDemoComponent;
let fixture: ComponentFixture<LineChartDemoComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ LinechartDemoComponent ]
declarations: [ LineChartDemoComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(LinechartDemoComponent);
fixture = TestBed.createComponent(LineChartDemoComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
......