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..63c9c18 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. * @@ -185,6 +185,7 @@ const StackedBarTrack = (HGC, ...args) => { this.maxAndMin.max, this.maxAndMin.min, tile); graphics.addChild(tile.sprite); + this.makeMouseOverData(tile); } @@ -449,22 +450,55 @@ 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]); @@ -501,18 +535,32 @@ 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); - tile.sprite = sprite; + + spriteGraphics.width = totalSpriteWidth; + spriteGraphics.x = this._xScale(tileX); + + // From here on out, all of the smaller sprites will be treated + // as one. + tile.sprite = spriteGraphics; tile.lowestY = lowestY; } + + draw() { + super.draw(); + } + /** * Adds information to recreate the track in SVG to the tile * @@ -786,9 +834,6 @@ const StackedBarTrack = (HGC, ...args) => { } - draw() { - super.draw(); - } } return new StackedBarTrackClass(...args);