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);