Skip to content
GitLab
Commit 86241832 authored by David Anderson's avatar David Anderson
Browse files

typescript version upgrade

parent dd81f113
Expand all Hide whitespace changes
Inline Side-by-side
.vscode/launch.json 0 → 100644
View file @ 86241832
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}
\ No newline at end of file
gist-charts.code-workspace
View file @ 86241832
......@@ -16,6 +16,9 @@
"*.d.ts": true,
"*.js": true,
"*.js.map": true
}
},
"cSpell.words": [
"tblr"
]
}
}
\ No newline at end of file
gist-charts/source/classes/chartCanvas.class.ts
View file @ 86241832
import { DebugLogger } from './debugLogger.class';
import { IMap } from '../types/iMap.interface';
import { clamp } from '../utility/clamp.method';
import { GistChartLayout } from './gistChartLayout.type';
import { GistBehavior } from '../behaviors/gistBehavior.class';
import { GistCanvas } from '../classes/gistCanvas.class';
import { BaseAxis } from '../configs/axis/baseAxis.class';
import { DataPoint } from './datapoint.class';
import { BaseChart } from '../configs/charts/baseChart.class';
import { GistCanvas } from '../classes/gistCanvas.class';
import { TBLR } from './tblr.class';
import { GistBehavior } from '../behaviors/gistBehavior.class';
import { IMap } from '../types/iMap.interface';
import { clamp } from '../utility/clamp.method';
import { makeList } from '../utility/makeList.method';
import { uID } from '../utility/uID.method';
import { DataPoint } from './datapoint.class';
import { DebugLogger } from './debugLogger.class';
import { GistChartLayout } from './gistChartLayout.type';
import { TBLR } from './tblr.class';
/* cSpell: words TBLR newb */
/**
......@@ -97,7 +96,12 @@ export class ChartCanvas {
this.id = uID();
me.contextEle = container;
me.contextEle.appendChild( me.canvas.canvasEle );
me.contextEle.addEventListener( 'mouseleave', me.cancelBehaviorActivation.bind(me), { passive: true } );
me.contextEle.addEventListener(
'mouseleave',
() => {
me.cancelBehaviorActivation();
},
{ passive: true } );
}
/**
......@@ -206,7 +210,7 @@ export class ChartCanvas {
me.renderAxis();
me.renderCharts();
} else {
this.debugLogger._log( 'ChartCanvas master canvas element is not big enough to draw on. height = '+ rs.totalHeight +'. width = '+ rs.totalWidth );
this.debugLogger._log( 'ChartCanvas master canvas element is not big enough to draw on. height = ' + rs.totalHeight + '. width = ' + rs.totalWidth );
}
}
......@@ -227,12 +231,12 @@ export class ChartCanvas {
} );
}
/**
* Add behaviors to this chart.
*
* @param {(GistBehavior | GistBehavior[])} behavior
* @memberof ChartCanvas
*/
/**
* Add behaviors to this chart.
*
* @param {(GistBehavior | GistBehavior[])} behavior
* @memberof ChartCanvas
*/
public addBehavior( behavior: GistBehavior | GistBehavior[] ): void {
const me = this;
let list = makeList( behavior ) as GistBehavior[];
......@@ -316,7 +320,7 @@ export class ChartCanvas {
if ( this.currentBehaviors[ key ] ) {
this.currentBehaviors[ key ].cancelWaitForFire();
}
}
}
}
/**
......@@ -340,7 +344,7 @@ export class ChartCanvas {
* @param {{ x: number, y: number }} panValue
* @memberof ChartCanvas
*/
public pan( x: number, y: number ) {
public pan( x: number, y: number ) {
const me = this;
if ( x | y ) {
me.axisList.forEach( ( axis: BaseAxis ) => {
......@@ -362,7 +366,7 @@ export class ChartCanvas {
return this.canvas.canvasEle.toDataURL( type );
}
public getImageData( x: number = 0, y: number = 0, width: number = this.canvas.canvasEle.clientWidth, height :number = this.canvas.canvasEle.clientHeight): ImageData {
public getImageData( x: number = 0, y: number = 0, width: number = this.canvas.canvasEle.clientWidth, height: number = this.canvas.canvasEle.clientHeight ): ImageData {
return this.canvas.context.getImageData( x, y, width, height );
}
......@@ -394,7 +398,7 @@ export class ChartCanvas {
let x: number = 0,
y: number = 0;
let size = rs.axisSizes[ axis._implementation.position ];
let isValid;
let isValid: boolean;
let width = rs.totalWidth,
height = rs.totalHeight;
if ( axis._implementation.isVertical ) {
......@@ -403,7 +407,7 @@ export class ChartCanvas {
height = size;
}
axis.debugLogger._log( 'Axis Canvas width = ' + width +', height = ' + height );
axis.debugLogger._log( 'Axis Canvas width = ' + width + ', height = ' + height );
isValid = axis._implementation.canvas.setSize( width, height );
if ( axis._implementation.position === 'top' ) {
......@@ -425,7 +429,7 @@ export class ChartCanvas {
axis._implementation.gridLineCanvas.renderTo( me.canvas.canvasEle, rs.chartBounds.left, rs.chartBounds.top );
}
} else {
axis.debugLogger._log('Invalid Size given for axis to draw. width = ' + width, +', height = '+ height);
axis.debugLogger._log( 'Invalid Size given for axis to draw. width = ' + width, +', height = ' + height );
}
} );
this.debugLogger._log( 'axis line been rendered' );
......@@ -460,10 +464,10 @@ export class ChartCanvas {
ele.style.display = 'block';
implementation.startDrawing();
} else {
chart.debugLogger._log( 'INVALID CHART SIZE: CHART WILL NOT RENDER: chartwidth = '+width +', chartHeight = '+ height );
chart.debugLogger._log( 'INVALID CHART SIZE: CHART WILL NOT RENDER: chartWidth = ' + width + ', chartHeight = ' + height );
}
} );
this.debugLogger._log( 'starting chartconfig polling' );
this.debugLogger._log( 'starting chart config polling' );
me.pollCharts();
}
......@@ -500,11 +504,11 @@ export class ChartCanvas {
} else {
this._areRenderChartsShowing = false;
if ( isDirty || hasActiveChanged) {
if ( isDirty || hasActiveChanged ) {
this.copyCharts();
}
}
me.animationFrame = window.requestAnimationFrame( me.pollCharts.bind( me ) );
me.animationFrame = window.requestAnimationFrame( () => { me.pollCharts(); } );
}
private showCharts() {
......@@ -558,7 +562,7 @@ export class ChartCanvas {
if ( chart.debugLogger.isEnabled ) {
let progress = imp.getDrawProgress();
chart.debugLogger._log( 'chart copied with ' + progress.drawnCount + ' out of ' + progress.totoalCount + ' datapoints' );
chart.debugLogger._log( 'chart copied with ' + progress.drawnCount + ' out of ' + progress.totalCount + ' datapoints' );
}
}
} );
......@@ -652,6 +656,3 @@ export class ChartCanvas {
return sizes;
}
}
gist-charts/source/configs/charts/areaChart/areaChart.class.ts
View file @ 86241832
import { BaseAxis } from '../../axis/baseAxis.class';
import {LineChartData} from '../lineChart/lineChartData.class';
import { DataPoint } from './../../../classes/datapoint.class';
import {CanvasStyle} from '../../../utility/canvasStyle.class';
import { AreaChartImplementation } from '../../../implementations/charts/areaChartImplementation.class';
import { CanvasStyle } from '../../../utility/canvasStyle.class';
import { BaseAxis } from '../../axis/baseAxis.class';
import { BaseChart } from '../baseChart.class';
import { LineChartData } from '../lineChart/lineChartData.class';
import { DataPoint } from './../../../classes/datapoint.class';
export class AreaChart extends BaseChart<LineChartData> {
_implementation: AreaChartImplementation = new AreaChartImplementation( this );
......@@ -28,7 +28,7 @@ export class AreaChart extends BaseChart<LineChartData> {
* @type {(BaseAxis | undefined)}
* @memberof AreaChart
*/
public fillAxis: BaseAxis | undefined;
public fillAxis: BaseAxis | undefined;
/**
* Value to fill areas to on the fill axis. The type should match that of the fill axis
......@@ -36,9 +36,8 @@ export class AreaChart extends BaseChart<LineChartData> {
* @type {*}
* @memberof AreaChart
*/
public axisOrigin: any;
public axisOrigin?: any;
public drawCountPerRender = 30;
}
gist-charts/source/implementations/axis/baseAxisImplementation.class.ts
View file @ 86241832
import { TBLR } from '../../classes/tblr.class';
import { ScaleLinear, scaleLinear, scaleLog, scaleTime } from 'd3-scale';
import { DataPoint } from '../../classes/datapoint.class';
import { GistCanvas } from '../../classes/gistCanvas.class';
import { TBLR } from '../../classes/tblr.class';
import { BaseAxis } from '../../configs/axis/baseAxis.class';
import { BaseChart } from '../../configs/charts/baseChart.class';
import { AxisLabel } from "../../types/axisLabel.type";
import { scaleLinear, ScaleLinear, scaleTime, scaleLog } from 'd3-scale';
import { Orientation } from "../../types/orientation.type";
import { AxisLabel } from '../../types/axisLabel.type';
import { Orientation } from '../../types/orientation.type';
export type AxisType = 'Continuous' | 'Temporal' | 'Categorical' | 'Log';
......@@ -57,16 +58,16 @@ export abstract class BaseAxisImplementation<T> {
* @memberof BaseAxis
*/
public get isVertical(): boolean {
return this.position === 'left' || this.position === 'right';
return this.position === 'left' || this.position === 'right';
}
/**
* Current zoom level. Should not alter manually!
*
* @type {number}
* @memberof BaseAxis
*/
/**
* Current zoom level. Should not alter manually!
*
* @type {number}
* @memberof BaseAxis
*/
public currentZoomLevel: number = 1;
/**
* Current offset in px.
......@@ -76,13 +77,13 @@ export abstract class BaseAxisImplementation<T> {
*/
public offset: number = 0;
/**
* Tells charts how to get the XY position to draw a data point at
*
* @param {DataPoint} dp
* @returns {number} xy position to draw at
* @memberof BaseAxis
*/
/**
* Tells charts how to get the XY position to draw a data point at
*
* @param {DataPoint} dp
* @returns {number} xy position to draw at
* @memberof BaseAxis
*/
public getScaledValue( dp: DataPoint ): number {
let me = this;
let ret = me.valueToPx( me.axis.getValue( dp ) );
......@@ -158,10 +159,10 @@ export abstract class BaseAxisImplementation<T> {
const me = this;
let zero: number, max: number;
if ( me.isVertical ) {
max = Math.max(axisMargin.top , axisSizes.top);
max = Math.max( axisMargin.top, axisSizes.top );
zero = max + chartHeight; // y = 0 at the top, so if we want everything else to be 0 at the bottom, we invert the max and zero
} else {
zero = Math.max(axisMargin.left , axisSizes.left);
zero = Math.max( axisMargin.left, axisSizes.left );
max = zero + chartWidth;
}
me.scale.range( [ zero, max ] );
......@@ -175,7 +176,7 @@ export abstract class BaseAxisImplementation<T> {
let ctx = me.canvas.context;
ctx.font = me.axis.font;
me.strWidth = 0;
me.getAxisLabels().forEach(( tick, i ) => {
me.getAxisLabels().forEach( ( tick, i ) => {
me.strWidth = Math.max( me.strWidth, tick.stringWidth );
} );
}
......@@ -261,7 +262,7 @@ export abstract class BaseAxisImplementation<T> {
let mmd = me.drawScaleMinMax;
let tickList = me.getAxisLabels();
this.axis.debugLogger._log('AxisLabels: ' , tickList );
this.axis.debugLogger._log( 'AxisLabels: ', tickList );
tickList.forEach( tick => {
if ( tick.position < mmd.min || tick.position > mmd.max ) {
return;
......@@ -292,7 +293,7 @@ export abstract class BaseAxisImplementation<T> {
ctx.fillText( tick.stringValue, 0, 0 );
}
ctx.restore();
if ( me.axis.shouldExtendTicksAcrossChart && glc) {
if ( me.axis.shouldExtendTicksAcrossChart && glc ) {
if ( me.isVertical ) {
glc.context.fillRect(
......@@ -370,7 +371,7 @@ export abstract class BaseAxisImplementation<T> {
let pad = me.axis.tickLabelPad * 2;
let tickLen = me.axis.tickLength + me.axis.axisLineThickness;
let labelSize: number;// = me.axis.label && me.axis.label.length ? me.axis.lineHeight : 0;
let labelSize: number; // = me.axis.label && me.axis.label.length ? me.axis.lineHeight : 0;
if ( me.axis.label && me.axis.label.length ) {
labelSize = me.axis.lineHeight;
} else {
......@@ -418,7 +419,7 @@ export abstract class BaseAxisImplementation<T> {
let newRange: number[] = me.scale.range();
const rangeWidth: number = newRange[ 1 ] - newRange[ 0 ];
let zoomRange: number[] = newRange.map(( x ) => { return x * me.currentZoomLevel; } );
let zoomRange: number[] = newRange.map( ( x ) => { return x * me.currentZoomLevel; } );
let rangeOffset: number = ( me.axisType === 'Categorical' || true ) ? Math.min( zoomRange[ 0 ], zoomRange[ 1 ] ) : 0;
// Set offset based off of max and min zoom extent.
......@@ -469,7 +470,7 @@ export abstract class BaseAxisImplementation<T> {
* @protected
* @memberof BaseAxisImplementation
*/
protected postFinalizeDataAndSize: (() => void ) | undefined;
protected postFinalizeDataAndSize: ( () => void ) | undefined;
/**
* Returns the default tick values to be drawn
......
gist-charts/source/implementations/axis/continuousAxisImplementation.class.ts
View file @ 86241832
import { BaseAxisImplementation } from './baseAxisImplementation.class';
import { ContinuousAxis } from '../../configs/axis/continuousAxis.class';
import { Orientation } from '../../types/orientation.type';
import { AxisLabel } from '../../types/axisLabel.type';
import { Orientation } from '../../types/orientation.type';
import { BaseAxisImplementation } from './baseAxisImplementation.class';
export class ContinuousAxisImplementation<T> extends BaseAxisImplementation<T> {
protected axis!: ContinuousAxis;
constructor( cac: ContinuousAxis, type: 'Continuous' | 'Temporal' | 'Log', position: Orientation ) {
super( cac, type,position );
super( cac, type, position );
}
notifyOfDataChange(): void {
......@@ -18,10 +18,10 @@ export class ContinuousAxisImplementation<T> extends BaseAxisImplementation<T> {
ctx.font = me.axis.font;
let bounds = me.axis.explicitBounds;
if ( !bounds || bounds.length !== 2 || isNaN( bounds[0] ) || isNaN( bounds[1] ) ) {
if ( !bounds || bounds.length !== 2 || isNaN( bounds[ 0 ] ) || isNaN( bounds[ 1 ] ) ) {
throw 'Gist Carts Error. Continuous axis require explicitBounds = [number, number]';
}
me.scale.domain( [ bounds[0], bounds[1] ] );
me.scale.domain( [ bounds[ 0 ], bounds[ 1 ] ] );
}
......@@ -56,19 +56,19 @@ export class ContinuousAxisImplementation<T> extends BaseAxisImplementation<T> {
} );
let jumpSteps: Array<number>;
if( me.axis.tickSkipSteps ){
if ( me.axis.tickSkipSteps ) {
jumpSteps = me.axis.tickSkipSteps;
}else{
} else {
jumpSteps = [];
while( jumpSteps.length < (masterList.length / 2 )+1 ){
jumpSteps.push( jumpSteps.length +1 );
while ( jumpSteps.length < ( masterList.length / 2 ) + 1 ) {
jumpSteps.push( jumpSteps.length + 1 );
}
}
let jump = 0;
if( me.isVertical ){
if ( me.isVertical ) {
jump = 1;
}
else{
else {
let hasOverlap = true;
let alignModifier: number = 0;
let tickTextAlign = me.textAlign;
......@@ -80,10 +80,10 @@ export class ContinuousAxisImplementation<T> extends BaseAxisImplementation<T> {
alignModifier = -1;
}
for (let jumpIndex = 0; hasOverlap && jumpIndex < jumpSteps.length; jumpIndex++ ) {
jump = jumpSteps[jumpIndex];
for ( let jumpIndex = 0; hasOverlap && jumpIndex < jumpSteps.length; jumpIndex++ ) {
jump = jumpSteps[ jumpIndex ];
hasOverlap = false;
let lastPos:number = Number.MIN_SAFE_INTEGER;
let lastPos: number = Number.MIN_SAFE_INTEGER;
for ( let i = 0; i < masterList.length && !hasOverlap; i += jump ) {
let label = masterList[ i ];
let posA = label.position + label.stringWidth * alignModifier;
......@@ -92,21 +92,21 @@ export class ContinuousAxisImplementation<T> extends BaseAxisImplementation<T> {
let min = Math.floor( Math.min( posA, posB ) ) - 5;
let max = Math.ceil( Math.max( posA, posB ) ) + 5;
if( i ){
if ( i ) {
hasOverlap = min <= lastPos;
}
lastPos = max;
}
}
}
masterList.forEach( (label, i) => {
let shouldMute = i % jump !== 0;
if( shouldMute ) {
masterList.forEach( ( label, i ) => {
let shouldMute = i % jump !== 0;
if ( shouldMute ) {
label.stringWidth = 0;
label.stringValue = '';
}
ret.push( label );
});
} );
return ret;
}
}
gist-charts/source/implementations/charts/areaChartImplementation.class.ts
View file @ 86241832
import { drawCanvasStyle } from '../../utility/drawCanvasStyle.method';
import { LineChartData } from '../../configs/charts/lineChart/lineChartData.class';
import { Extent } from '../../classes/extent.class';
import { MinMax } from '../../classes/minMax.class';
import { CanvasStyle } from '../../utility/canvasStyle.class';
import { DataPoint } from './../../classes/datapoint.class';
import { AreaChart } from '../../configs/charts/areaChart/areaChart.class';
import { LineChartData } from '../../configs/charts/lineChart/lineChartData.class';
import { BaseChartImplementation } from '../../implementations/charts/baseChartImplementation.class';
import { Extent } from '../../classes/extent.class';
import { CanvasStyle } from '../../utility/canvasStyle.class';
import { drawCanvasStyle } from '../../utility/drawCanvasStyle.method';
import { DataPoint } from './../../classes/datapoint.class';
export class AreaChartImplementation extends BaseChartImplementation {
protected chart: AreaChart;
......@@ -55,7 +55,10 @@ export class AreaChartImplementation extends BaseChartImplementation {
if ( me.chart.shouldFillToOrigin ) {
let origin;
if ( me.chart.axisOrigin === undefined ) {
throw 'AreaChart.axisOrigin cannot be undefined when AreaChart.shouldFillToOrigin is true';
}
let origin: any;
if ( isFillX ) {
origin = me.valueToPx( me.yAxis, me.chart.axisOrigin );
firstPoint.y = lastPoint.y = origin;
......
gist-charts/source/implementations/charts/baseChartImplementation.class.ts
View file @ 86241832
import { GistCanvas } from '../../classes/gistCanvas.class';
import { DataPoint } from '../../classes/datapoint.class';
import { uID } from '../../utility/uID.method';
import { BaseChart } from '../../configs/charts/baseChart.class';
import { GistCanvas } from '../../classes/gistCanvas.class';
import { BaseAxis } from '../../configs/axis/baseAxis.class';
import { BaseChart } from '../../configs/charts/baseChart.class';
import { uID } from '../../utility/uID.method';
/* cSpell: words coord */
export abstract class BaseChartImplementation {
......@@ -20,21 +21,21 @@ export abstract class BaseChartImplementation {
*/
public canvas = new GistCanvas();
/**
* The axis that will be used to scale x values
/**
* The axis that will be used to scale x values
*
* @type {BaseAxis}
* @memberof BaseChart
*/
public xAxis: BaseAxis = undefined as any;
/**
* The axis that will be used to scale y values
*
* @type {BaseAxis}
* @memberof BaseChart
*/
public xAxis: BaseAxis = undefined as any;
/**
* The axis that will be used to scale y values
*
* @type {BaseAxis}
* @memberof BaseChart
*/
public yAxis: BaseAxis = undefined as any;
public yAxis: BaseAxis = undefined as any;
/**
* The configuration for this chart
......@@ -104,8 +105,8 @@ export abstract class BaseChartImplementation {
}
/**
* This is used to let the chartcanvas it needs to recopy charts without this one.
* Will be set to true any time chart.isActive is toggled, will be set to false, when the chartcanvas copies it.
* This is used to let the chartCanvas it needs to recopy charts without this one.
* Will be set to true any time chart.isActive is toggled, will be set to false, when the chartCanvas copies it.
*
* @type {boolean}
* @memberof BaseChartImplementation
......@@ -115,11 +116,11 @@ export abstract class BaseChartImplementation {
public set isDirty( b: boolean ) {
const me = this;
if ( b != me._isDirty ) {
if ( b !== me._isDirty ) {
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.canvasEle.style.zIndex = '1';
me.onDataWipe();
this.clearExtents();
......@@ -142,7 +143,7 @@ export abstract class BaseChartImplementation {
*/
public initCanvas( width: number, height: number, background?: string ): boolean {
let isValid = this.canvas.setSize( width, height );
this.canvas.clearCanvas( background , this.chart.margin);
this.canvas.clearCanvas( background, this.chart.margin );
this.isDirty = true;
this.canvas.context.globalAlpha = this.chart.alpha;
if ( isValid ) {
......@@ -239,7 +240,7 @@ export abstract class BaseChartImplementation {
public getDrawProgress() {
return {
drawnCount: this.drawnData.length,
totoalCount: this.chart.datalist().length
totalCount: this.chart.datalist().length
};
}
}
gist-charts/source/implementations/charts/lineChartImplementation.class.ts
View file @ 86241832
import { Extent } from '../../classes/extent.class';
import { DataPoint } from '../../classes/datapoint.class';
import { BaseChartImplementation } from '../../implementations/charts/baseChartImplementation.class';
import { Extent } from '../../classes/extent.class';
import { LineChart } from '../../configs/charts/lineChart/lineChart.class';
import { LineChartData } from '../../configs/charts/lineChart/lineChartData.class';
import { BaseChartImplementation } from '../../implementations/charts/baseChartImplementation.class';
import { drawCanvasStyle } from '../../utility/drawCanvasStyle.method';
export class LineChartImplementation extends BaseChartImplementation {
......@@ -13,16 +13,16 @@ export class LineChartImplementation extends BaseChartImplementation {
const me = this;
let processedLine = {} as ProcessedLine;
let lineExtent = line._chartIdToExtentMap[ me.chart.id ] = new Extent();
let lineExtent = line._chartIdToExtentMap[ me.chart.id ] = new Extent();
processedLine.lineDP = line;
processedLine.points = [];
line.points.forEach(( dp: DataPoint, i ) => {