233 lines
4.1 KiB
JavaScript
233 lines
4.1 KiB
JavaScript
export class Graph {
|
|
|
|
constructor( maxPoints = 512 ) {
|
|
|
|
this.maxPoints = maxPoints;
|
|
this.lines = {};
|
|
this.limit = 0;
|
|
this.limitIndex = 0;
|
|
|
|
this.domElement = document.createElement( 'canvas' );
|
|
this.domElement.setAttribute( 'class', 'graph-canvas' );
|
|
|
|
this.ctx = this.domElement.getContext( '2d' );
|
|
|
|
this.width = 0;
|
|
this.height = 0;
|
|
this.devicePixelRatio = window.devicePixelRatio || 1;
|
|
|
|
}
|
|
|
|
resize( width, height ) {
|
|
|
|
this.width = width;
|
|
this.height = height;
|
|
|
|
this.devicePixelRatio = window.devicePixelRatio || 1;
|
|
this.domElement.width = width * this.devicePixelRatio;
|
|
this.domElement.height = height * this.devicePixelRatio;
|
|
|
|
this.draw();
|
|
|
|
}
|
|
|
|
addLine( id, color ) {
|
|
|
|
this.lines[ id ] = {
|
|
color: color,
|
|
resolved: null,
|
|
points: []
|
|
};
|
|
|
|
}
|
|
|
|
addPoint( lineId, value ) {
|
|
|
|
const line = this.lines[ lineId ];
|
|
if ( ! line ) return;
|
|
|
|
line.points.push( value );
|
|
if ( line.points.length > this.maxPoints ) {
|
|
|
|
line.points.shift();
|
|
|
|
}
|
|
|
|
if ( value > this.limit ) {
|
|
|
|
this.limit = value;
|
|
this.limitIndex = 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
resetLimit() {
|
|
|
|
this.limit = 0;
|
|
this.limitIndex = 0;
|
|
|
|
}
|
|
|
|
update() {
|
|
|
|
const width = this.domElement.clientWidth;
|
|
const height = this.domElement.clientHeight;
|
|
|
|
if ( width === 0 || height === 0 ) return;
|
|
|
|
if ( width !== this.width || height !== this.height ) {
|
|
|
|
this.resize( width, height );
|
|
|
|
} else {
|
|
|
|
this.draw();
|
|
|
|
}
|
|
|
|
if ( this.limitIndex ++ > this.maxPoints ) {
|
|
|
|
this.resetLimit();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
draw() {
|
|
|
|
const ctx = this.ctx;
|
|
const dpr = this.devicePixelRatio;
|
|
const width = this.width;
|
|
const height = this.height;
|
|
|
|
ctx.clearRect( 0, 0, width * dpr, height * dpr );
|
|
|
|
if ( width === 0 || height === 0 ) return;
|
|
|
|
ctx.save();
|
|
ctx.scale( dpr, dpr );
|
|
|
|
const pointStep = width / ( this.maxPoints - 1 );
|
|
|
|
for ( const id in this.lines ) {
|
|
|
|
const line = this.lines[ id ];
|
|
if ( line.points.length === 0 ) continue;
|
|
|
|
if ( ! line.resolved ) {
|
|
|
|
line.resolved = this._resolveColor( line.color );
|
|
|
|
}
|
|
|
|
const resolved = line.resolved;
|
|
const drawColor = resolved ? resolved.color : '#ffffff';
|
|
const offset = width - ( ( line.points.length - 1 ) * pointStep );
|
|
|
|
// 1. Draw fill (with opacity)
|
|
let fillStyle = drawColor;
|
|
|
|
if ( height > 0 ) {
|
|
|
|
const gradient = ctx.createLinearGradient( 0, 0, 0, height );
|
|
gradient.addColorStop( 0, drawColor );
|
|
gradient.addColorStop( 1, ( resolved && resolved.transparent ) || 'rgba(0,0,0,0)' );
|
|
fillStyle = gradient;
|
|
|
|
}
|
|
|
|
ctx.fillStyle = fillStyle;
|
|
ctx.globalAlpha = 0.4;
|
|
ctx.beginPath();
|
|
ctx.moveTo( offset, height );
|
|
for ( let i = 0; i < line.points.length; i ++ ) {
|
|
|
|
const x = offset + i * pointStep;
|
|
const y = this.limit === 0 ? height : height - ( line.points[ i ] / this.limit ) * height;
|
|
ctx.lineTo( x, y );
|
|
|
|
}
|
|
|
|
ctx.lineTo( offset + ( line.points.length - 1 ) * pointStep, height );
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
|
|
// 2. Draw stroke (full opacity)
|
|
ctx.strokeStyle = drawColor;
|
|
ctx.lineWidth = 2;
|
|
ctx.globalAlpha = 1.0;
|
|
ctx.beginPath();
|
|
for ( let i = 0; i < line.points.length; i ++ ) {
|
|
|
|
const x = offset + i * pointStep;
|
|
const y = this.limit === 0 ? height : height - ( line.points[ i ] / this.limit ) * height;
|
|
if ( i === 0 ) {
|
|
|
|
ctx.moveTo( x, y );
|
|
|
|
} else {
|
|
|
|
ctx.lineTo( x, y );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
ctx.stroke();
|
|
|
|
}
|
|
|
|
ctx.restore();
|
|
|
|
}
|
|
|
|
_resolveColor( color ) {
|
|
|
|
let resolved = color;
|
|
|
|
if ( color.startsWith( 'var(' ) ) {
|
|
|
|
const varName = color.slice( 4, - 1 ).trim();
|
|
resolved = getComputedStyle( this.domElement ).getPropertyValue( varName ).trim();
|
|
|
|
if ( ! resolved ) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
let transparentColor = 'rgba(0,0,0,0)';
|
|
|
|
if ( resolved.startsWith( '#' ) ) {
|
|
|
|
const hex = resolved.substring( 0, 7 );
|
|
transparentColor = hex + '00';
|
|
|
|
} else if ( resolved.startsWith( 'rgb' ) ) {
|
|
|
|
const match = resolved.match( /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*[\d.]+)?\)$/ );
|
|
|
|
if ( match ) {
|
|
|
|
transparentColor = `rgba(${match[ 1 ]}, ${match[ 2 ]}, ${match[ 3 ]}, 0)`;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return {
|
|
color: resolved,
|
|
transparent: transparentColor
|
|
};
|
|
|
|
}
|
|
|
|
dispose() {
|
|
|
|
}
|
|
|
|
}
|