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

added folded

parent 9a5eb02d
<mat-card>
<mat-card-title>
Zoom and Pan Demo
</mat-card-title>
<mat-card-subtitle>
For when you actually care about details
</mat-card-subtitle>
<mat-card-content>
<div fxLayout="row"
fxLayoutGap="10px "
fxLayoutAlign="start stretch">
<div xFlex="initial"
class="chart"
#drawspace> </div>
</div>
</mat-card-content>
</mat-card>
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ZoomPanDemmoComponent } from './zoom-pan-demmo.component';
describe('ZoomPanDemmoComponent', () => {
let component: ZoomPanDemmoComponent;
let fixture: ComponentFixture<ZoomPanDemmoComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ZoomPanDemmoComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ZoomPanDemmoComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';
import { ChartCanvas, ContinuousAxis, DataPoint, PanBehavior, ScatterChart, ScatterStyle, ZoomBehavior } from 'gist-charts';
@Component( {
selector: 'app-zoom-pan-demmo',
templateUrl: './zoom-pan-demmo.component.html',
styleUrls: [ './zoom-pan-demmo.component.css' ]
} )
export class ZoomPanDemmoComponent implements AfterViewInit, OnDestroy {
@ViewChild( 'drawspace' )
drawspace: ElementRef;
chart: ChartCanvas;
intervals: number[] = [];
ngAfterViewInit() {
const me = this;
me.chart = new ChartCanvas( me.drawspace.nativeElement );
( window as any ).chart = me.chart;
console.log( ( window as any ).chart );
const pointCount = 20;
const baseChart = new ScatterChart();
const selectionChart = new ScatterChart();
baseChart.margin = 5;
selectionChart.margin = 15;
// selectionChart.debugLogger.isEnabled = true;
selectionChart.background = 'rgba(255,255,255,0.5)';
selectionChart.isActive = false;
baseChart.getStyle = ( dp: DataPoint<ScatterData> ) => {
const style = dp.data as ScatterData;
return new ScatterStyle( '#333', '#333', style.radius );
};
selectionChart.getStyle = ( dp: DataPoint<ScatterData> ) => {
const style = dp.data as ScatterData;
return new ScatterStyle( style.stroke, style.fill, style.radius * 2 );
};
const leftAxis: ContinuousAxis = new ContinuousAxis( 'left' );
const bottomAxis: ContinuousAxis = new ContinuousAxis( 'bottom' );
const rightAxis: ContinuousAxis = new ContinuousAxis( 'right' );
const topAxis: ContinuousAxis = new ContinuousAxis( 'top' );
const axis = [
bottomAxis,
leftAxis
];
axis.forEach( a => {
a.registerChart( baseChart );
a.registerChart( selectionChart );
a.explicitBounds = [ 0, pointCount ];
// a.fill = 'white';
} );
topAxis.getValue = bottomAxis.getValue = ( dp ) => dp.data.x;
rightAxis.getValue = leftAxis.getValue = ( dp ) => dp.data.y;
leftAxis.label = 'left';
bottomAxis.label = 'bottom';
rightAxis.label = 'right';
topAxis.label = 'top';
leftAxis.shouldExtendTicksAcrossChart = true;
bottomAxis.shouldExtendTicksAcrossChart = true;
let selectedData: DataPoint[] = [];
baseChart.margin = 5;
selectionChart.datalist( selectedData );
me.chart.addChart( [ baseChart, selectionChart ] );
me.chart.addAxis( axis );
let zoom = new ZoomBehavior();
zoom.limitZoom( axis, 0.5, 1.5 );
let pan = new PanBehavior( 'wheel' ); // use wheel because we want to click on the data
pan.limitPan( bottomAxis, pointCount * -0.25, pointCount * 1.25 );
me.chart.addBehavior(
[ zoom, pan ]
);
const dataList = testDataX( pointCount );
baseChart.datalist( dataList );
me.chart.beginRender();
}
ngOnDestroy() {
this.intervals.forEach( int => {
window.clearInterval( int );
} );
}
}
function testDataX( pointCount: number = 10000 ): Array<DataPoint> {
const scdp: Array<DataPoint> = [];
for ( let i = 0; i <= pointCount; i++ ) {
scdp.push( new DataPoint( {
x: i,
y: i,
radius: 3,
fill: 'red',
} ) );
}
for ( let i = 0; i <= pointCount; i++ ) {
scdp.push( new DataPoint( {
x: i,
y: pointCount - i,
radius: 3,
fill: 'red',
} ) );
}
for ( let i = 0; i <= pointCount; i++ ) {
scdp.push( new DataPoint( {
x: i,
y: pointCount / 2,
radius: 3,
fill: 'red',
} ) );
}
for ( let i = 0; i <= pointCount; i++ ) {
scdp.push( new DataPoint( {
x: pointCount / 2,
y: i,
radius: 3,
fill: 'red',
} ) );
}
return scdp;
}
function randomInt( min: number, max: number ): number {
const diff = max - min;
return Math.round( Math.random() * diff + min );
}
class ScatterData {
x = 0;
y = 0;
radius = 0;
fill = '';
stroke = '';
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment