Skip to content

GitLab

Commit 00b7bcbf authored by David Anderson's avatar David Anderson
Browse files

commiting because ng told me to

parent d955fb7d
Expand all Hide whitespace changes
Inline Side-by-side
demo-angularIO/package-lock.json
View file @ 00b7bcbf
This diff is collapsed.
demo-angularIO/src/app/linechart-demo/linechart-demo.component.ts
View file @ 00b7bcbf
/* cSpell:words lcdp */
import { CanvasStyle, LineChartData, LineChart, ContinuousAxis, ChartCanvas, DataPoint, GetDataAtMouseEvent } from 'gist-charts';
import { Component, ViewChild, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';
import {
CanvasStyle,
ChartCanvas,
ContinuousAxis,
DataPoint,
GetDataAtMouseEvent,
LineChart,
LineChartData,
} from 'gist-charts';
const pointCount = 40;
const lineCount = 1;
const stepCount = 1;
const lineCount = 1000;
const stepCount = 10;
const spikeChance = 0.2;
const spikeJump = 5;
......
gist-charts/package-lock.json
View file @ 00b7bcbf
......@@ -3973,6 +3973,17 @@
"string-width": "^2.1.0",
"strip-ansi": "^4.0.0",
"through": "^2.3.6"
},
"dependencies": {
"rxjs": {
"version": "5.5.12",
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.5.12.tgz",
"integrity": "sha512-xx2itnL5sBbqeeiVgNPVuQQ1nC8Jp2WfNJhXWHmElW9YmrpS9UVnNzhP3EH3HFqexO5Tlp8GhYY+WEcqcVMvGw==",
"dev": true,
"requires": {
"symbol-observable": "1.0.1"
}
}
}
},
"interpret": {
......@@ -4578,6 +4589,15 @@
"chalk": "^1.0.0"
}
},
"rxjs": {
"version": "5.5.12",
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.5.12.tgz",
"integrity": "sha512-xx2itnL5sBbqeeiVgNPVuQQ1nC8Jp2WfNJhXWHmElW9YmrpS9UVnNzhP3EH3HFqexO5Tlp8GhYY+WEcqcVMvGw==",
"dev": true,
"requires": {
"symbol-observable": "1.0.1"
}
},
"strip-ansi": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
......@@ -9724,12 +9744,11 @@
}
},
"rxjs": {
"version": "5.5.8",
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.5.8.tgz",
"integrity": "sha512-Bz7qou7VAIoGiglJZbzbXa4vpX5BmTTN2Dj/se6+SwADtw4SihqBIiEa7VmTXJ8pynvq0iFr5Gx9VLyye1rIxQ==",
"dev": true,
"version": "6.5.2",
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.2.tgz",
"integrity": "sha512-HUb7j3kvb7p7eCUHE3FqjoDsC1xfZQ4AHFWfTKSpZ+sAhhz5X1WX0ZuUqWbzB2QhSLp3DoLUG+hMdEDKqWo2Zg==",
"requires": {
"symbol-observable": "1.0.1"
"tslib": "^1.9.0"
}
},
"safe-buffer": {
......@@ -10406,6 +10425,11 @@
"semver": "^5.0.1"
}
},
"tslib": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
"integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
},
"tty-browserify": {
"version": "0.0.0",
"resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
......
gist-charts/package.json
View file @ 00b7bcbf
......@@ -40,6 +40,7 @@
"d3-array": "^1.2.0",
"d3-quadtree": "^1.0.3",
"d3-scale": "^2.0.0",
"rxjs": "^6.5.2",
"d3-scale-chromatic": "^1.2.0",
"d3-selection": "^1.1.0",
"declaration-bundler-webpack-plugin": "^1.0.3",
......
gist-charts/source/classes/chartCanvas.class.ts
View file @ 00b7bcbf
import { combineLatest, Observable } from 'rxjs';
import { distinctUntilChanged, map } from 'rxjs/operators';
import { GistBehavior } from '../behaviors/gistBehavior.class';
import { GistCanvas } from '../classes/gistCanvas.class';
import { BaseAxis } from '../configs/axis/baseAxis.class';
......@@ -30,7 +33,6 @@ export class ChartCanvas {
/**
* The debug logger. To enable debugger, the isEnabled property must be set to true. It is also advised to set logPrefix to distinguish between different debuggers
*
* @memberof ChartCanvas
*/
public readonly debugLogger = new DebugLogger();
......@@ -38,7 +40,6 @@ export class ChartCanvas {
* This is the element that the chart will display in. When this is told to render, it will draw to size of this element.
*
* @type {HTMLElement}
* @memberof ChartCanvas
*/
private contextEle!: HTMLElement;
......@@ -46,7 +47,6 @@ export class ChartCanvas {
* Gist Charts only! Tracks the clickable space that can be panned via double clicks
*
* @type {{ x0: number, x1: number, y0: number, y1: number }}
* @memberof ChartCanvas
*/
public _panClickSpace!: { x0: number, x1: number, y0: number, y1: number };
......@@ -54,7 +54,6 @@ export class ChartCanvas {
* Gist Charts only! Should only be changed through the zoom method. The current zoom level. Defaults to 1
*
* @type {number}
* @memberof ChartCanvas
*/
public _currentZoomState: number = 1;
......@@ -63,7 +62,6 @@ export class ChartCanvas {
* undefined is transparent
*
* @type {string}
* @memberof ChartCanvas
*/
public background: string | undefined;
public layout = new GistChartLayout();
......@@ -89,7 +87,10 @@ export class ChartCanvas {
};
private animationFrame: number = 0;
private _areRenderChartsShowing = false;
private areChartsRendering!: Observable<boolean>;
// private areAxisRending: Observable<boolean>;
// private isMainCanvasRendering: Observable<boolean>;
constructor( container: HTMLElement ) {
let me = this;
......@@ -108,7 +109,6 @@ export class ChartCanvas {
* Add one or many charts to be rendered
*
* @param {(BaseChart<DataPoint> | BaseChart<DataPoint>[])} configs
* @memberof ChartCanvas
*/
public addChart( configs: BaseChart<DataPoint> | BaseChart<DataPoint>[] ): void {
let me = this;
......@@ -116,11 +116,13 @@ export class ChartCanvas {
let newList = makeList( configs );
newList.forEach( ( chart: BaseChart<DataPoint> ) => {
me.chartList.push( chart );
let ele = chart._implementation.canvas.canvasEle;
ele.style.position = 'absolute';
ele.style.zIndex = '-1';
// ele.style.display = 'none';
me.contextEle.appendChild( ele );
chart._implementation
} );
}
......@@ -128,7 +130,6 @@ export class ChartCanvas {
* Remove one or many charts to be rendered
*
* @param {(BaseChart<DataPoint> | BaseChart<DataPoint>[])} configs
* @memberof ChartCanvas
*/
public removeChart( configs: BaseChart<DataPoint> | BaseChart<DataPoint>[] ): void {
let me = this;
......@@ -150,7 +151,6 @@ export class ChartCanvas {
* add one or many axis to be rendered
*
* @param {(BaseAxis | Array<BaseAxis>)} configs
* @memberof ChartCanvas
*/
public addAxis( configs: BaseAxis | Array<BaseAxis> ) {
let me = this;
......@@ -168,7 +168,6 @@ export class ChartCanvas {
* remove one or many axis, will disappear on next redraw
*
* @param {(BaseAxis | Array<BaseAxis>)} configs
* @memberof ChartCanvas
*/
public removeAxis( configs: BaseAxis | Array<BaseAxis> ) {
let me = this;
......@@ -189,7 +188,6 @@ export class ChartCanvas {
/**
* updates the rendered chart
*
* @memberof ChartCanvas
*/
public beginRender(): void {
let me = this;
......@@ -224,7 +222,6 @@ export class ChartCanvas {
/**
* The Chart freezes as it stands
*
* @memberof ChartCanvas
*/
public stopRender() {
const me = this;
......@@ -241,7 +238,6 @@ export class ChartCanvas {
* Add behaviors to this chart.
*
* @param {(GistBehavior | GistBehavior[])} behavior
* @memberof ChartCanvas
*/
public addBehavior( behavior: GistBehavior | GistBehavior[] ): void {
const me = this;
......@@ -296,7 +292,6 @@ export class ChartCanvas {
* Remove the given behaviors from this chart, this will cancel any throttled events
*
* @param {(GistBehavior | GistBehavior[])} behaviors
* @memberof ChartCanvas
*/
public removeBehavior( behaviors: GistBehavior | GistBehavior[] ): void {
const me = this;
......@@ -318,7 +313,6 @@ export class ChartCanvas {
/**
* Call this method to cancel all behaviors that are waiting to fire. This will be called automatically on mouse leave.
*
* @memberof ChartCanvas
*/
public cancelBehaviorActivation(): void {
this.debugLogger._log( 'cancelBehaviorActivation' );
......@@ -348,7 +342,6 @@ export class ChartCanvas {
* Pan the chart by the given x, y values
*
* @param {{ x: number, y: number }} panValue
* @memberof ChartCanvas
*/
public pan( x: number, y: number ) {
const me = this;
......@@ -365,7 +358,6 @@ export class ChartCanvas {
*
* @param {string} [type]
* @returns {string}
* @memberof ChartCanvas
*/
public getDataUrl( type?: string ): string {
return this.canvas.canvasEle.toDataURL( type );
......@@ -380,7 +372,6 @@ export class ChartCanvas {
*
* @private
* @returns {boolean}
* @memberof ChartCanvas
*/
private renderAxis(): boolean {
const me = this;
......@@ -446,7 +437,6 @@ export class ChartCanvas {
* Render the given charts. This will happen without updating axis, so would be used when you know the axis is stable.
*
* @private
* @memberof ChartCanvas
*/
private renderCharts(): void {
let me = this;
......@@ -478,38 +468,51 @@ export class ChartCanvas {
private pollCharts() {
const me = this;
let isRenderInProgress = false;
let isDirty = false;
let hasActiveChanged: boolean = false;
if ( me.renderedRatio !== window.devicePixelRatio ) {
me.debugLogger._log( 'GistCharts is now redrawing due to pixel ratio change. This is normally caused by dragging changing computer monitors.' );
me.beginRender();
}
me.chartList.forEach( chart => {
let canvas = chart._implementation.canvas;
if ( chart.isActive ) {
isRenderInProgress = isRenderInProgress || chart._implementation.isRenderInProgress;
isDirty = isDirty || chart._implementation.isDirty;
} else {
canvas.canvasEle.style.visibility = 'hidden';
}
hasActiveChanged = hasActiveChanged || chart._implementation.hasActiveChanged;
me.areChartsRendering = combineLatest( me.chartList.map( chart => chart._implementation.isRenderInProgress ) ).pipe(
map( array => array.indexOf( false ) === -1 ),
distinctUntilChanged()
);
} );
if ( isRenderInProgress ) {
if ( !this._areRenderChartsShowing ) {
this._areRenderChartsShowing = true;
me.areChartsRendering.subscribe( isRenderInProgress => {
if ( isRenderInProgress ) {
isDirty = true;
this.showCharts();
}
} else {
this._areRenderChartsShowing = false;
if ( isDirty || hasActiveChanged ) {
} else if ( isDirty ) {
isDirty = false;
this.copyCharts();
}
} )
if ( me.renderedRatio !== window.devicePixelRatio ) {
me.debugLogger._log( 'GistCharts is now redrawing due to pixel ratio change. This is normally caused by dragging changing computer monitors.' );
me.beginRender();
}
me.animationFrame = window.requestAnimationFrame( () => { me.pollCharts(); } );
// me.chartList.forEach( chart => {
// let canvas = chart._implementation.canvas;
// if ( chart.isActive ) {
// isRenderInProgress = isRenderInProgress || chart._implementation.isRenderInProgress;
// isDirty = isDirty || chart._implementation.isDirty;
// } else {
// canvas.canvasEle.style.visibility = 'hidden';
// }
// hasActiveChanged = hasActiveChanged || chart._implementation.hasActiveChanged;
// } );
// if ( isRenderInProgress ) {
// if ( !this._areRenderChartsShowing ) {
// this._areRenderChartsShowing = true;
// this.showCharts();
// }
// } else {
// this._areRenderChartsShowing = false;
// if ( isDirty || hasActiveChanged ) {
// this.copyCharts();
// }
// }
// me.animationFrame = window.requestAnimationFrame( () => { me.pollCharts(); } );
}
private showCharts() {
......@@ -564,7 +567,6 @@ export class ChartCanvas {
axis._implementation.canvas.renderTo( me.canvas.canvasEle, x, y );
} );
me.chartList.forEach( chart => {
chart._implementation.hasActiveChanged = false;
if ( chart.isActive ) {
let imp = chart._implementation;
let margin = chart.margin;
......@@ -660,7 +662,6 @@ export class ChartCanvas {
*
* @private
* @returns {TBLR<number>}
* @memberof ChartCanvas
*/
private getAxisSizes(): TBLR<number> {
let sizes: TBLR<number> = new TBLR( 0 );
......
gist-charts/source/configs/charts/baseChart.class.ts
View file @ 00b7bcbf
import { BehaviorSubject } from 'rxjs';
import { DataPoint } from '../../classes/datapoint.class';
import { uID } from '../../utility/uID.method';
import { BaseChartImplementation } from '../../implementations/charts/baseChartImplementation.class';
import { makeList } from '../../utility/makeList.method';
import { DebugLogger } from '../../classes/debugLogger.class';
import { BaseChartImplementation } from '../../implementations/charts/baseChartImplementation.class';
import { CanvasStyle } from '../../utility/canvasStyle.class';
import { makeList } from '../../utility/makeList.method';
import { uID } from '../../utility/uID.method';
export abstract class BaseChart<T extends DataPoint = DataPoint> {
/**
......@@ -76,7 +78,7 @@ export abstract class BaseChart<T extends DataPoint = DataPoint> {
* @returns {(string | null)}
* @memberof BaseChart
*/
public getStyledZIndex():string | null {
public getStyledZIndex(): string | null {
return this._zIndex ? this._zIndex.toString() : null;
}
......@@ -87,13 +89,13 @@ export abstract class BaseChart<T extends DataPoint = DataPoint> {
* @memberof BaseChart
*/
public set isActive( val: boolean ) {
if ( val !== this._isActive ) {
this.debugLogger._log( 'chart isActive change', val );
this._implementation.hasActiveChanged = true;
this._isActive = val;
if ( val !== this._isActive.value ) {
this.debugLogger._log( 'chart isActive change', val );
this._isActive.next( val );
}
}
public get isActive() { return this._isActive; }
public get isActive() { return this._isActive.value; }
/**
* The background for this chart.
......@@ -103,7 +105,7 @@ export abstract class BaseChart<T extends DataPoint = DataPoint> {
*/
public set background( val: string | undefined ) {
if ( val !== this._background ) {
this.debugLogger._log( 'chart background change', val );
this.debugLogger._log( 'chart background change', val );
this._implementation.isDirty = true;
}
this._background = val;
......@@ -156,7 +158,7 @@ export abstract class BaseChart<T extends DataPoint = DataPoint> {
public drawCountPerRender: number = 100;
private _zIndex: number | undefined;
private _isActive: boolean = true;
private _isActive: BehaviorSubject<boolean> = new BehaviorSubject<boolean>( true );
private _background: string | undefined;
}
gist-charts/source/implementations/charts/baseChartImplementation.class.ts
View file @ 00b7bcbf
import { BehaviorSubject, Observable } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';
import { DataPoint } from '../../classes/datapoint.class';
import { GistCanvas } from '../../classes/gistCanvas.class';
import { BaseAxis } from '../../configs/axis/baseAxis.class';
......@@ -86,23 +89,11 @@ export abstract class BaseChartImplementation {
* true if the chart is rendering, false if not
*
* @private
* @type {boolean}
* @type {BehaviorSubject<boolean>}
* @memberof BaseChartImplementation
*/
private _isRenderInProgress: boolean = false;
public get isRenderInProgress() {
return this._isRenderInProgress;
}
public set isRenderInProgress( b: boolean ) {
if ( b !== this._isRenderInProgress ) {
this.chart.debugLogger._log( 'render state change', b );
if ( this.chart.onRenderStateChange ) {
this.chart.onRenderStateChange( b );
}
}
this._isRenderInProgress = b;
}
private _isRenderInProgress: BehaviorSubject<boolean> = new BehaviorSubject<boolean>( false );
public isRenderInProgress: Observable<boolean> = this._isRenderInProgress.asObservable().pipe( distinctUntilChanged() );
/**
* This is used to let the chartCanvas it needs to recopy charts without this one.
......@@ -111,7 +102,6 @@ export abstract class BaseChartImplementation {
* @type {boolean}
* @memberof BaseChartImplementation
*/
public hasActiveChanged: boolean = true;
private _isDirty: boolean = false;
public set isDirty( b: boolean ) {
......@@ -210,12 +200,12 @@ export abstract class BaseChartImplementation {
me.animationFrame = window.requestAnimationFrame( () => {
if ( this.chart.datalist().length !== this.drawnData.length ) {
this._isDirty = true;
this.isRenderInProgress = true;
this._isRenderInProgress.next( true );
me.chart.debugLogger._log( 'rendering new points, isDirty will be true without clearing' );
me.render();
}
else {
this.isRenderInProgress = false;
this._isRenderInProgress.next( false );
}
me.animationFrame = 0;
me.startDrawing();
......
package-lock.json
View file @ 00b7bcbf
This diff is collapsed.
package.json
View file @ 00b7bcbf
......@@ -12,8 +12,10 @@
],
"license": "MIT",
"dependencies": {
"@angular/cli": "^8.1.3",
"d3-quadtree": "^1.0.6",
"d3-scale": "^2.2.2"
"d3-scale": "^2.2.2",
"rxjs": "^6.5.2"
},
"files": [
"package"
......@@ -31,7 +33,6 @@
"postdemo": "npm run testScript; npm run testAngular",
"predemo": "npm run angular-io:install || exit 0; npm run gist-charts:install || exit 0; npm install",
"start": "concurrently \"cd gist-charts && npm run start\" \"npm run testAngular\"",
"build": "cd gist-charts && npm run build"
}
}
package/classes/chartCanvas.class.d.ts
View file @ 00b7bcbf
......@@ -21,21 +21,18 @@ export declare class ChartCanvas {
/**
* The debug logger. To enable debugger, the isEnabled property must be set to true. It is also advised to set logPrefix to distinguish between different debuggers
*
* @memberof ChartCanvas
*/
readonly debugLogger: DebugLogger;
/**
* This is the element that the chart will display in. When this is told to render, it will draw to size of this element.
*
* @type {HTMLElement}
* @memberof ChartCanvas
*/
private contextEle;
/**
* Gist Charts only! Tracks the clickable space that can be panned via double clicks
*
* @type {{ x0: number, x1: number, y0: number, y1: number }}
* @memberof ChartCanvas
*/
_panClickSpace: {
x0: number;
......@@ -47,7 +44,6 @@ export declare class ChartCanvas {
* Gist Charts only! Should only be changed through the zoom method. The current zoom level. Defaults to 1
*
* @type {number}
* @memberof ChartCanvas
*/
_currentZoomState: number;
/**
......@@ -55,7 +51,6 @@ export declare class ChartCanvas {
* undefined is transparent
*
* @type {string}
* @memberof ChartCanvas
*/
background: string | undefined;
layout: GistChartLayout;
......@@ -67,66 +62,57 @@ export declare class ChartCanvas {
private renderedRatio;
private renderedSizes;
private animationFrame;
private _areRenderChartsShowing;
private areChartsRendering;
constructor(container: HTMLElement);
/**
* Add one or many charts to be rendered
*
* @param {(BaseChart<DataPoint> | BaseChart<DataPoint>[])} configs
* @memberof ChartCanvas
*/
addChart(configs: BaseChart<DataPoint> | BaseChart<DataPoint>[]): void;
/**
* Remove one or many charts to be rendered
*
* @param {(BaseChart<DataPoint> | BaseChart<DataPoint>[])} configs
* @memberof ChartCanvas
*/
removeChart(configs: BaseChart<DataPoint> | BaseChart<DataPoint>[]): void;
/**
* add one or many axis to be rendered
*
* @param {(BaseAxis | Array<BaseAxis>)} configs
* @memberof ChartCanvas
*/
addAxis(configs: BaseAxis | Array<BaseAxis>): void;
/**
* remove one or many axis, will disappear on next redraw
*
* @param {(BaseAxis | Array<BaseAxis>)} configs
* @memberof ChartCanvas
*/
removeAxis(configs: BaseAxis | Array<BaseAxis>): void;
/**
* updates the rendered chart
*
* @memberof ChartCanvas
*/
beginRender(): void;
/**
* The Chart freezes as it stands
*
* @memberof ChartCanvas
*/
stopRender(): void;
/**
* Add behaviors to this chart.
*
* @param {(GistBehavior | GistBehavior[])} behavior
* @memberof ChartCanvas
*/
addBehavior(behavior: GistBehavior | GistBehavior[]): void;
/**
* Remove the given behaviors from this chart, this will cancel any throttled events
*
* @param {(GistBehavior | GistBehavior[])} behaviors
* @memberof ChartCanvas
*/
removeBehavior(behaviors: GistBehavior | GistBehavior[]): void;
/**
* Call this method to cancel all behaviors that are waiting to fire. This will be called automatically on mouse leave.
*
* @memberof ChartCanvas
*/
cancelBehaviorActivation(): void;
/**
......@@ -138,7 +124,6 @@ export declare class ChartCanvas {
* Pan the chart by the given x, y values
*
* @param {{ x: number, y: number }} panValue
* @memberof ChartCanvas
*/
pan(x: number, y: number): void;
/**
......@@ -146,7 +131,6 @@ export declare class ChartCanvas {
*
* @param {string} [type]
* @returns {string}