fix: Don't relocate text in "Stacked" mode.

If it doesn't fit, then hide it. Signed-off-by: Gordon Smith <[email protected]>
hpcc-systems · Mar 15, 2024 · 2944a96 · 2944a96
1 parent 58c4746
commit 2944a96
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 9 deletions.
diff --git a/packages/chart/index.html b/packages/chart/index.html
@@ -34,9 +34,11 @@
 <body onresize="doResize()">
     <div>
         Stacked:
-        <input type="checkbox" value="stacked" onclick="doStacked(this.checked)" />
+        <input type="checkbox" value="stacked" checked onclick="doStacked(this.checked)" />
         Bar:
         <input type="checkbox" value="bar" onclick="doBar(this.checked)" />
+        Percentage:
+        <input type="checkbox" value="percentage" checked onclick="doPercentage(this.checked)" />
     </div>
     <div id="placeholder">
     </div>
@@ -75,6 +77,14 @@
                     .lazyRender();
             }
         }
+
+        function doPercentage(percentage) {
+            if (app) {
+                app
+                    .showValueAsPercent(percentage ? "domain" : undefined)
+                    .lazyRender();
+            }
+        }
     </script>
 </body>
 

diff --git a/packages/chart/src/Column.ts b/packages/chart/src/Column.ts
@@ -88,6 +88,7 @@ export class Column extends XYAxis {
         if (this.useClonedPalette()) {
             this._palette = this._palette.cloneNotExists(this.paletteID() + "_" + this.id());
         }
+        const formatPct = d3Format(context.showValueAsPercentFormat());
 
         let dataLen = 10;
         let offset = 0;
@@ -202,11 +203,11 @@ export class Column extends XYAxis {
                         switch (context.showValueAsPercent()) {
                             case "series":
                                 const seriesSum = typeof dm.sum !== "undefined" ? dm.sum : seriesSums[d.idx];
-                                valueText = d3Format(context.showValueAsPercentFormat())(valueText / seriesSum);
+                                valueText = formatPct(valueText / seriesSum);
                                 break;
                             case "domain":
-                                const domainSum = typeof dm.sum !== "undefined" ? dm.sum : domainSums[d.idx - 1];
-                                valueText = d3Format(context.showValueAsPercentFormat())(valueText / domainSum);
+                                const domainSum = typeof dm.sum !== "undefined" ? dm.sum : domainSums[dataRowIdx];
+                                valueText = formatPct(valueText / domainSum);
                                 break;
                             case null:
                             default:
@@ -391,7 +392,7 @@ export class Column extends XYAxis {
                                         pos.y = dataRect.y + (dataRect.height / 2);
                                     }
                                 } else { // Bar
-                                    noRoomInside = context.yAxisStacked() ? false : dataRect.width < textSize.width;
+                                    noRoomInside = dataRect.width < textSize.width;
                                     isOutside = !context.valueCentered() || noRoomInside;
 
                                     pos.y = dataRect.y + (dataRect.height / 2);
@@ -431,7 +432,8 @@ export class Column extends XYAxis {
 
                             //  Prevent overlapping labels on stacked columns
                             const columns = context.columns();
-                            const hideValue = isOutside && context.yAxisStacked() && columns.indexOf(d.column) !== columns.length - 1;
+                            const hideValue = (context.yAxisStacked() && noRoomInside) ||
+                                (isOutside && context.yAxisStacked() && columns.indexOf(d.column) !== columns.length - 1);
                             context.textLocal.get(this)
                                 .pos(pos)
                                 .anchor(valueAnchor)

diff --git a/packages/chart/src/test.ts b/packages/chart/src/test.ts
@@ -13,8 +13,8 @@ export class Test3 extends Column {
             .columns(["", "Dismissed", "Pending", "Assigned"])
             .data([
                 ["Joe Cocker", 10, 1, 10],
-                ["Steve Tyler", 18, 1, 12],
-                ["Einar Solberg", 19, 1, 21]
+                ["Steve Tyler", 20, 2, 11],
+                ["Einar Solberg", 30, 3, 12]
             ])
             // .paletteID("siuReportPalette")
             .showValue(true)
@@ -30,7 +30,7 @@ export class Test3 extends Column {
             .valueCentered(true)
             .valueAnchor("middle")
             // .xAxisSeriesPaddingInner(3)
-            // .yAxisStacked(true)
+            .yAxisStacked(true)
             .yAxisGuideLines(true)
             .yAxisHidden(true)
             .xAxisHidden(false)