Merge pull request #4178 from GordonSmith/XYAXIS_PADDING

feat: Add Axis Padding
hpcc-systems · Mar 15, 2024 · 04936ba · 04936ba
2 parents feba47b + a38074e
commit 04936ba
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 1 deletion.
diff --git a/demos/gallery/samples/chart/Column/StackedTotals.js b/demos/gallery/samples/chart/Column/StackedTotals.js
@@ -13,6 +13,8 @@ new Column()
     .showValueAsPercentFormat(".2%")
     .showDomainTotal(true)
     .yAxisType("linear")
+    .yAxisPadding(16)
+    .yAxisDomainPadding(0)
     .xAxisType("ordinal")
     .maxPointSize(26)
     .xAxisOrdinalPaddingOuter(0.1)

diff --git a/demos/gallery/samples/chart/Column/StackedTotalsBar.js b/demos/gallery/samples/chart/Column/StackedTotalsBar.js
@@ -0,0 +1,34 @@
+import { Bar } from "@hpcc-js/chart";
+
+new Bar()
+    .target("target")
+    .columns(["", "Failed", "TODO", "Passed"])
+    .data([
+        ["Joe Cocker", 10, 10, 10],
+        ["Stephen Tyler", 8, 10, 12],
+        ["Einar Solberg", 19, 10, 1]
+    ])
+    .showValue(true)
+    .showValueAsPercent("domain")
+    .showValueAsPercentFormat(".2%")
+    .showDomainTotal(true)
+    .yAxisType("linear")
+    .yAxisPadding(32)
+    .yAxisDomainPadding(0)
+    .xAxisType("ordinal")
+    .maxPointSize(26)
+    .xAxisOrdinalPaddingOuter(0.1)
+    .xAxisOrdinalPaddingInner(0.6)
+    .xAxisOverlapMode("stagger")
+    .valueCentered(true)
+    .valueAnchor("middle")
+    .xAxisSeriesPaddingInner(3)
+    .yAxisStacked(true)
+    .yAxisGuideLines(true)
+    .yAxisHidden(true)
+    .yAxisDomainPadding(0.1)
+    .xAxisHidden(false)
+    .xAxisFocus(false)
+    .xAxisGuideLines(false)
+    .render()
+    ;
diff --git a/packages/chart/index.html b/packages/chart/index.html
@@ -74,6 +74,7 @@
             if (app) {
                 app
                     .orientation(!bar ? "horizontal" : "vertical")
+                    .yAxisPadding(!bar ? 16 : 32)
                     .lazyRender();
             }
         }

diff --git a/packages/chart/src/Axis.ts b/packages/chart/src/Axis.ts
@@ -311,6 +311,7 @@ export class Axis extends SVGWidget {
                     break;
             }
         }
+
         this.d3Axis
             .scale(this.d3Scale)
             .tickFormat(this.formatter)
@@ -550,7 +551,8 @@ export class Axis extends SVGWidget {
         const overlap = this.calcOverflow(element);
 
         const lowerPos: number = this.isHorizontal() ? overlap.left : this.height() - overlap.top - overlap.bottom;
-        const upperPos: number = this.isHorizontal() ? this.width() - overlap.right : 0;
+        const upperPos: number = this.isHorizontal() ? this.width() - overlap.right - this.padding() : 0 + this.padding();
+
         this.range(this.reverse() ? [upperPos, lowerPos] : [lowerPos, upperPos]);
 
         const context = this;
@@ -703,6 +705,8 @@ export interface Axis {
     ordinalMappings(_: { [key: string]: string }): this;
     ordinalMappings(): { [key: string]: string };
     ordinalMappings_exists(): boolean;
+    padding(): number;
+    padding(_: number): this;
 }
 
 Axis.prototype.publish("title", null, "string", "Title");
@@ -726,3 +730,4 @@ Axis.prototype.publish("hidden", false, "boolean", "Hides axis when 'true'");
 Axis.prototype.publish("ordinalPaddingInner", 0.1, "number", "Determines the ratio of the range that is reserved for blank space between band (0->1)", null, { disable: (w: Axis) => w.type() !== "ordinal" });
 Axis.prototype.publish("ordinalPaddingOuter", 0.1, "number", "Determines the ratio of the range that is reserved for blank space before the first band and after the last band (0->1)", null, { disable: (w: Axis) => w.type() !== "ordinal" });
 Axis.prototype.publish("ordinalMappings", null, "object", "Alternative label mappings (icons)", null, { optional: true });
+Axis.prototype.publish("padding", 0, "number", "Padding space at top of axis (pixels)", null, { optional: true });
diff --git a/packages/chart/src/XYAxis.ts b/packages/chart/src/XYAxis.ts
@@ -750,6 +750,10 @@ export interface XYAxis {
     regions(_: object[]): this;
     layers(): XYAxis[];
     layers(_: XYAxis[]): this;
+    xAxisPadding(): number;
+    xAxisPadding(_: number): this;
+    yAxisPadding(): number;
+    yAxisPadding(_: number): this;
 }
 
 XYAxis.prototype.publish("orientation", "horizontal", "set", "Selects orientation for the axis", ["horizontal", "vertical"]);
@@ -795,3 +799,5 @@ XYAxis.prototype.publish("yAxisGuideLines", true, "boolean", "Y-Axis Guide Lines
 XYAxis.prototype.publishProxy("yAxisHidden", "valueAxis", "hidden");
 XYAxis.prototype.publish("regions", [], "array", "Regions");
 XYAxis.prototype.publish("layers", [], "widgetArray", "Layers", null, { render: false });
+XYAxis.prototype.publishProxy("xAxisPadding", "domainAxis", "padding");
+XYAxis.prototype.publishProxy("yAxisPadding", "valueAxis", "padding");
diff --git a/packages/chart/src/test.ts b/packages/chart/src/test.ts
@@ -19,6 +19,8 @@ export class Test3 extends Column {
             // .paletteID("siuReportPalette")
             .showValue(true)
             .showValueAsPercent("domain")
+            .yAxisPadding(16)
+            .yAxisDomainPadding(0)
             // .showValueAsPercentFormat(".2%")
             .showDomainTotal(true)
             .yAxisType("linear")