Commit 431c8d7d authored by David Anderson's avatar David Anderson
Browse files

chart margins are now cleared

parent 0392098f
import {
ScatterStyle
, PanBehavior
, GetDataAtMouseEvent
, DataPoint
, ScatterChart
, ContinuousAxis
, ChartCanvas
, ZoomBehavior,
} from 'gist-charts';
import { Component, ViewChild, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';
import { ChartCanvas, ContinuousAxis, DataPoint, GetDataAtMouseEvent, ScatterChart, ScatterStyle } from 'gist-charts';
/* cSpell: words divs scdp */
@Component( {
......@@ -31,8 +23,10 @@ export class ScatterChartDemoComponent implements AfterViewInit, OnDestroy {
const pointCount = 20;
const baseChart = new ScatterChart();
baseChart.margin = 15;
const selectionChart = new ScatterChart();
baseChart.margin = 5;
selectionChart.margin = 15;
// selectionChart.debugLogger.isEnabled = true;
selectionChart.background = 'rgba(255,255,255,0.5)';
......@@ -45,7 +39,7 @@ export class ScatterChartDemoComponent implements AfterViewInit, OnDestroy {
selectionChart.getStyle = ( dp: DataPoint<ScatterData> ) => {
const style = dp.data as ScatterData;
return new ScatterStyle( style.stroke, style.fill, style.radius * 1.5 );
return new ScatterStyle( style.stroke, style.fill, style.radius * 2 );
};
......@@ -79,8 +73,7 @@ export class ScatterChartDemoComponent implements AfterViewInit, OnDestroy {
let selectedData: DataPoint[] = [];
baseChart.margin = 5;
selectionChart.datalist( selectedData );
me.chart.addChart( baseChart );
me.chart.addChart( selectionChart );
me.chart.addChart( [ baseChart, selectionChart ] );
me.chart.addAxis( axis );
const getData = new GetDataAtMouseEvent(
'click',
......@@ -104,24 +97,15 @@ export class ScatterChartDemoComponent implements AfterViewInit, OnDestroy {
},
5
);
const zoom = new ZoomBehavior();
// zoom.limitZoom( axis, 0.5, 1.5 );
const 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(
[ getData
// , zoom, pan
]
[ getData ]
);
const dataList = randomData( pointCount );
// const dataList = testDataX( pointCount );
baseChart.datalist( dataList );
me.chart.beginRender();
// setTimeout(redraw, 20000);
}
ngOnDestroy() {
this.intervals.forEach( int => {
......@@ -133,7 +117,6 @@ export class ScatterChartDemoComponent implements AfterViewInit, OnDestroy {
function randomData( pointCount: number = 10000 ): Array<DataPoint> {
const scdp: Array<DataPoint> = [];
// scdp.length = pointCount;
const tmpArr = [ 'blue', 'green', 'grey', 'black', 'brown', 'yellow', 'orange', 'purple', 'pink', 'red', 'blue', 'green', 'grey', 'black', 'brown', 'yellow', 'orange', 'purple', 'pink', 'red' ];
for ( let i = 0; i < pointCount; i++ ) {
const fill = tmpArr[ randomInt( 0, 9 ) ];
......@@ -152,6 +135,28 @@ function randomData( pointCount: number = 10000 ): Array<DataPoint> {
return scdp;
}
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',
} ) );
}
return scdp;
}
function randomInt( min: number, max: number ): number {
const diff = max - min;
return Math.round( Math.random() * diff + min );
......
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"jsx": "preserve"
},
"exclude": [
"node_modules",
"**/node_modules/*",
"src",
"bin",
"package"
]
}
\ No newline at end of file
......@@ -473,8 +473,6 @@ export class ChartCanvas {
private pollCharts() {
const me = this;
const rs = me.renderedSizes;
const cb = rs.chartBounds;
let isRenderInProgress = false;
let isDirty = false;
let hasActiveChanged: boolean = false;
......@@ -497,8 +495,6 @@ export class ChartCanvas {
if ( isRenderInProgress ) {
if ( !this._areRenderChartsShowing ) {
this._areRenderChartsShowing = true;
me.canvas.context.clearRect( cb.left, cb.top, rs.chartWidth, rs.chartHeight );
me.drawGridLines();
this.showCharts();
}
} else {
......@@ -514,6 +510,8 @@ export class ChartCanvas {
private showCharts() {
const me = this;
this.debugLogger._log( 'making config charts visible' );
me.canvas.clearCanvas( me.background );
me.drawGridLines();
me.chartList.forEach( chart => {
// me.canvas.context.globalAlpha = chart.alpha;
let imp = chart._implementation;
......@@ -540,7 +538,8 @@ export class ChartCanvas {
const me = this;
const rs = me.renderedSizes;
let cb = rs.chartBounds;
me.canvas.context.clearRect( cb.left, cb.top, rs.chartWidth, rs.chartHeight );
me.canvas.clearCanvas( me.background );
me.renderAxis();
me.drawGridLines();
//ensure the charts are in order of zIndex
me.chartList.sort( ( a: BaseChart, b: BaseChart ) => {
......@@ -555,7 +554,7 @@ export class ChartCanvas {
let margin = chart.margin;
let canvas = imp.canvas;
canvas.renderTo( me.canvas.canvasEle, rs.chartBounds.left - margin, rs.chartBounds.top - margin );
canvas.renderTo( me.canvas.canvasEle, cb.left - margin, cb.top - margin );
canvas.canvasEle.style.zIndex = '-1';
canvas.canvasEle.style.visibility = 'hidden';
imp.isDirty = false;
......
......@@ -120,7 +120,8 @@ export abstract class BaseChartImplementation {
me.chart.debugLogger._log( 'isDirty change', b );
}
if ( b ) {
me.canvas.clearCanvas( me.chart.background, this.chart.margin );
// me.canvas.clearCanvas( me.chart.background, this.chart.margin );
me.canvas.clearCanvas( me.chart.background );
me.canvas.canvasEle.style.zIndex = '1';
me.onDataWipe();
this.clearExtents();
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This diff is collapsed.
{
"compilerOptions": {
"noImplicitAny": false,
"allowSyntheticDefaultImports": true,
"allowUnreachableCode": false,
"declaration": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"forceConsistentCasingInFileNames": true,
"lib": ["es2015", "dom"],
"module": "es2015",
"moduleResolution": "node",
"noEmit": false,
"noEmitOnError": true,
"noUnusedLocals": true,
"skipLibCheck": true,
"outDir": "gen/compiledJS",
"declarationDir": "gen/package",
"sourceMap": true,
"strict": true,
"target": "es5",
"typeRoots": ["node_modules/@types/"]
},
"files": [
"node_modules/typescript/lib/lib.es6.d.ts",
],
"exclude": [
"node_modules",
"gen"
],
"include": [
"***/*.ts"
],
"compileOnSave": false
}
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