fix(core): Flipped y-axis stacked bar chart (#1042)

* fix: flipped stacked bar in linear track * fix: circular flipped bar
gosling-lang · Feb 22, 2024 · 6f13ae7 · 6f13ae7
1 parent 560d121
commit 6f13ae7
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/src/core/mark/bar.ts b/src/core/mark/bar.ts
@@ -71,6 +71,7 @@ export function drawBar(track: any, tile: Tile, model: GoslingTrackModel) {
         const pivotedData = group(data, d => d[genomicChannel.field as string]);
         const xKeys = [...pivotedData.keys()];
 
+        const isFlippedY = (IsChannelDeep(spec.y) && spec.y.flip) || spec.flipY;
         // TODO: users may want to align rows by values
         xKeys.forEach(k => {
             let prevYEnd = 0;
@@ -89,8 +90,12 @@ export function drawBar(track: any, tile: Tile, model: GoslingTrackModel) {
                 const alphaTransition = model.markVisibility(d, { width: barWidth, zoomLevel });
                 const actualOpacity = Math.min(alphaTransition, opacity);
 
-                if (actualOpacity === 0 || barWidth <= 0 || y <= 0) {
-                    // do not draw invisible marks
+                if (
+                    actualOpacity === 0 ||
+                    barWidth <= 0 ||
+                    (isFlippedY && y - rowHeight >= 0) ||
+                    (!isFlippedY && y <= 0)
+                ) {
                     return;
                 }
 
@@ -103,9 +108,13 @@ export function drawBar(track: any, tile: Tile, model: GoslingTrackModel) {
 
                 let polygonForMouseEvents: number[] = [];
 
+                const barHeight = isFlippedY ? rowHeight - y : y;
+
                 if (circular) {
-                    const farR = trackOuterRadius - ((rowHeight - prevYEnd) / trackHeight) * trackRingSize;
-                    const nearR = trackOuterRadius - ((rowHeight - y - prevYEnd) / trackHeight) * trackRingSize;
+                    const ys = isFlippedY ? prevYEnd : rowHeight - prevYEnd;
+                    const farR = trackOuterRadius - (ys / trackHeight) * trackRingSize;
+                    const ye = isFlippedY ? barHeight + prevYEnd : rowHeight - y - prevYEnd;
+                    const nearR = trackOuterRadius - (ye / trackHeight) * trackRingSize;
 
                     const sPos = cartesianToPolar(xs, trackWidth, nearR, cx, cy, startAngle, endAngle);
                     const startRad = valueToRadian(xs, trackWidth, startAngle, endAngle);
@@ -119,16 +128,15 @@ export function drawBar(track: any, tile: Tile, model: GoslingTrackModel) {
                     g.closePath();
                 } else {
                     g.beginFill(colorToHex(color), color === 'none' ? 0 : actualOpacity);
-                    g.drawRect(xs, rowHeight - y - prevYEnd, barWidth, y);
-                    const ys = rowHeight - y - prevYEnd;
+                    const ys = isFlippedY ? prevYEnd : rowHeight - y - prevYEnd;
+                    g.drawRect(xs, ys, barWidth, barHeight);
                     const ye = ys + y;
                     polygonForMouseEvents = [xs, ys, xs, ye, xe, ye, xe, ys];
                 }
 
                 /* Mouse Events */
                 model.getMouseEventModel().addPolygonBasedEvent(d, polygonForMouseEvents);
-
-                prevYEnd += y;
+                prevYEnd += barHeight;
             });
         });
     } else {

diff --git a/src/tracks/gosling-track/gosling-track.ts b/src/tracks/gosling-track/gosling-track.ts
@@ -1025,7 +1025,7 @@ const factory: PluginTrackFactory<Tile, GoslingTrackOptions> = (HGC, context, op
 
                 // Replace width and height information with the actual values for responsive encoding
                 const [trackWidth, trackHeight] = this.dimensions; // actual size of a track
-                const axisSize = IsXAxis(resolvedSpec) ? HIGLASS_AXIS_SIZE : 0; // Why the axis size must be added here?
+                const axisSize = IsXAxis(resolvedSpec) && this.options.spec.layout === 'linear' ? HIGLASS_AXIS_SIZE : 0; // Why the axis size must be added here?
                 const [w, h] = [trackWidth, trackHeight + axisSize];
                 const circularFactor = Math.min(w, h) / Math.min(resolvedSpec.width!, resolvedSpec.height!);
                 if (resolvedSpec.innerRadius) {