From 3dc4ab5af1ee2c823346113e0a25c301d1ef4b5b Mon Sep 17 00:00:00 2001 From: Peter Kerpedjiev Date: Thu, 18 Jul 2024 16:01:08 -0700 Subject: [PATCH 1/2] Investigating why having 1024 bins breaks stacked bar tracks --- src/index.html | 17 +++++++++------- src/scripts/BasicMultipleLineChart.js | 5 ----- src/scripts/StackedBarTrack.js | 29 ++++++++++++++++++++++----- 3 files changed, 34 insertions(+), 17 deletions(-) diff --git a/src/index.html b/src/index.html index 4103ecb..e78177e 100644 --- a/src/index.html +++ b/src/index.html @@ -40,12 +40,12 @@ "views": [ { "initialXDomain": [ - 1504509233.6974547, - 2580802995.761386 + -1981882620.4529774, + 6427919756.160531 ], "initialYDomain": [ - 2169832804.3409615, - 2171727687.7248764 + 2805039666.8707376, + 3115965458.963842 ], "tracks": { "top": [ @@ -145,10 +145,13 @@ "#808080", "#C0C0C0", "#FFFFFF" - ] + ], + "backgroundColor": "white", + "barBorder": true, + "sortLargestOnTop": true }, "width": 568, - "height": 100 + "height": 140 } ], "left": [], @@ -160,7 +163,7 @@ }, "layout": { "w": 12, - "h": 6, + "h": 10, "x": 0, "y": 0, "moved": false, diff --git a/src/scripts/BasicMultipleLineChart.js b/src/scripts/BasicMultipleLineChart.js index a08fae7..22419a8 100644 --- a/src/scripts/BasicMultipleLineChart.js +++ b/src/scripts/BasicMultipleLineChart.js @@ -25,7 +25,6 @@ const BasicMultipleLineChart = (HGC, ...args) => { */ localColorToHexScale() { const colorScale = this.options.colorScale || scaleOrdinal(schemeCategory10).range(); - console.log('colorScale', this.options.colorScale); const colorHexMap = {}; for (let i = 0; i < colorScale.length; i++) { colorHexMap[colorScale[i]] = colorToHex(colorScale[i]); @@ -93,13 +92,10 @@ const BasicMultipleLineChart = (HGC, ...args) => { const y = linePlacement - valueScale(value); this.addSVGInfo(tile, x, y, colorScale[i]); - // console.log('i,y', index, y, value); - // move draw position back to the start at beginning of each line (j === 0) ? graphics.moveTo(x, y) : graphics.lineTo(x, y); } } - } drawTile() { } @@ -234,7 +230,6 @@ const BasicMultipleLineChart = (HGC, ...args) => { } getMouseOverHtml(trackX, trackY) { - //console.log(this.tilesetInfo, trackX, trackY); return ''; } diff --git a/src/scripts/StackedBarTrack.js b/src/scripts/StackedBarTrack.js index 97ff15c..61f589d 100644 --- a/src/scripts/StackedBarTrack.js +++ b/src/scripts/StackedBarTrack.js @@ -157,7 +157,7 @@ const StackedBarTrack = (HGC, ...args) => { const tiles = xTiles.map((x) => [this.zoomLevel, x]); this.setVisibleTiles(tiles); } - + /** * Draws exactly one tile. * @@ -176,6 +176,9 @@ const StackedBarTrack = (HGC, ...args) => { const {tileX, tileWidth} = this.getTilePosAndDimensions(tile.tileData.zoomLevel, tile.tileData.tilePos, this.tilesetInfo.tile_size); + console.log('tile', tile); + console.log('tileX', tileX); + const matrix = this.unFlatten(tile); this.oldDimensions = this.dimensions; // for mouseover @@ -185,6 +188,10 @@ const StackedBarTrack = (HGC, ...args) => { this.maxAndMin.max, this.maxAndMin.min, tile); graphics.addChild(tile.sprite); + + + console.log('graphics.position', graphics.position) + console.log('graphics.scale', graphics.scale) this.makeMouseOverData(tile); } @@ -436,6 +443,8 @@ const StackedBarTrack = (HGC, ...args) => { this.textureGraphics.clear(); const trackHeight = this.dimensions[1]; + console.log('drawVerticalBars', tileX, tileWidth); + // get amount of trackHeight reserved for positive and for negative const unscaledHeight = positiveMax + (Math.abs(negativeMax)); @@ -458,7 +467,6 @@ const StackedBarTrack = (HGC, ...args) => { this.textureGraphics.lineStyle(1, 0x000000, 1); } - for (let j = 0; j < matrix.length; j++) { // jth vertical bar in the graph const x = (j * width); (j === 0) ? start = x : start; @@ -470,6 +478,11 @@ const StackedBarTrack = (HGC, ...args) => { .range([0, positiveTrackHeight]); let positiveStackedHeight = 0; + if (j > 1024 + + ) + continue; + for (let i = 0; i < positive.length; i++) { const height = valueToPixelsPositive(positive[i].value); const y = positiveTrackHeight - (positiveStackedHeight + height); @@ -509,10 +522,19 @@ const StackedBarTrack = (HGC, ...args) => { const sprite = new HGC.libraries.PIXI.Sprite(texture); sprite.width = this._xScale(tileX + tileWidth) - this._xScale(tileX); sprite.x = this._xScale(tileX); + + console.log('sprite.x', sprite.x); + console.log('sprite.width', sprite.width); + tile.sprite = sprite; tile.lowestY = lowestY; } + + draw() { + super.draw(); + } + /** * Adds information to recreate the track in SVG to the tile * @@ -786,9 +808,6 @@ const StackedBarTrack = (HGC, ...args) => { } - draw() { - super.draw(); - } } return new StackedBarTrackClass(...args); From 1f034793de47c466fb4ae6a67f7d0f8c83ce935a Mon Sep 17 00:00:00 2001 From: Peter Kerpedjiev Date: Thu, 18 Jul 2024 22:19:55 -0700 Subject: [PATCH 2/2] Fixed stacked bar track for length 1024 tiles by breaking up sprites into smaller sprites --- src/scripts/StackedBarTrack.js | 72 +++++++++++++++++++++++----------- 1 file changed, 49 insertions(+), 23 deletions(-) diff --git a/src/scripts/StackedBarTrack.js b/src/scripts/StackedBarTrack.js index 61f589d..63c9c18 100644 --- a/src/scripts/StackedBarTrack.js +++ b/src/scripts/StackedBarTrack.js @@ -176,9 +176,6 @@ const StackedBarTrack = (HGC, ...args) => { const {tileX, tileWidth} = this.getTilePosAndDimensions(tile.tileData.zoomLevel, tile.tileData.tilePos, this.tilesetInfo.tile_size); - console.log('tile', tile); - console.log('tileX', tileX); - const matrix = this.unFlatten(tile); this.oldDimensions = this.dimensions; // for mouseover @@ -189,9 +186,6 @@ const StackedBarTrack = (HGC, ...args) => { graphics.addChild(tile.sprite); - - console.log('graphics.position', graphics.position) - console.log('graphics.scale', graphics.scale) this.makeMouseOverData(tile); } @@ -443,8 +437,6 @@ const StackedBarTrack = (HGC, ...args) => { this.textureGraphics.clear(); const trackHeight = this.dimensions[1]; - console.log('drawVerticalBars', tileX, tileWidth); - // get amount of trackHeight reserved for positive and for negative const unscaledHeight = positiveMax + (Math.abs(negativeMax)); @@ -458,31 +450,60 @@ const StackedBarTrack = (HGC, ...args) => { let lowestY = this.dimensions[1]; const width = 10; + const spriteGraphics = new HGC.libraries.PIXI.Graphics(); // calls drawBackground in PixiTrack.js this.drawBackground(matrix, this.textureGraphics); + const totalSpriteWidth = this._xScale(tileX + tileWidth) - this._xScale(tileX); // borders around each bar if (this.options.barBorder) { this.textureGraphics.lineStyle(1, 0x000000, 1); } + const spritesHeights = []; + + function addNewSprite(j) { + // We're going to use this function to break up the tile graphics into + // sprites of size 256. We do this because textures larger than 256 seem + // to cause loading problems in Chrome and Firefox + const spriteWidth = (256 / matrix.length) * totalSpriteWidth; + + const texture = pixiRenderer.generateTexture( + this.textureGraphics, HGC.libraries.PIXI.SCALE_MODES.NEAREST + ); + + const sprite = new HGC.libraries.PIXI.Sprite(texture); + sprite.width = spriteWidth; + sprite.x = ((j-256) / matrix.length) * totalSpriteWidth; + spriteGraphics.addChild(sprite); + + spritesHeights.push({ + "sprite": sprite, + "height": texture.height + }) + + this.textureGraphics.clear() + this.drawBackground(matrix, this.textureGraphics); + } + for (let j = 0; j < matrix.length; j++) { // jth vertical bar in the graph const x = (j * width); (j === 0) ? start = x : start; + if (j > 0 && j % 256 == 0) { + // Add a new small sprite + addNewSprite.bind(this)(j) + } + // draw positive values const positive = matrix[j][0]; + const valueToPixelsPositive = scaleLinear() .domain([0, positiveMax]) .range([0, positiveTrackHeight]); let positiveStackedHeight = 0; - if (j > 1024 - - ) - continue; - for (let i = 0; i < positive.length; i++) { const height = valueToPixelsPositive(positive[i].value); const y = positiveTrackHeight - (positiveStackedHeight + height); @@ -514,19 +535,24 @@ const StackedBarTrack = (HGC, ...args) => { } } + addNewSprite.bind(this)(matrix.length); + + // Scale all the "sprites" so that they're aligned along the bottom + const maxHeight = spritesHeights.reduceRight((pv, spriteHeight) => Math.max(pv, spriteHeight.height), 0); + for (let i = 0; i < spritesHeights.length; i++) { + const sprite = spritesHeights[i].sprite; + sprite.y = maxHeight - spritesHeights[i].height; + } + // vertical bars are drawn onto the graphics object // and a texture is generated from that - const texture = pixiRenderer.generateTexture( - this.textureGraphics, HGC.libraries.PIXI.SCALE_MODES.NEAREST - ); - const sprite = new HGC.libraries.PIXI.Sprite(texture); - sprite.width = this._xScale(tileX + tileWidth) - this._xScale(tileX); - sprite.x = this._xScale(tileX); - - console.log('sprite.x', sprite.x); - console.log('sprite.width', sprite.width); + + spriteGraphics.width = totalSpriteWidth; + spriteGraphics.x = this._xScale(tileX); - tile.sprite = sprite; + // From here on out, all of the smaller sprites will be treated + // as one. + tile.sprite = spriteGraphics; tile.lowestY = lowestY; }