Added new legend positions (#136)

* Added TopRight and BottomRight positions for Legend

* Bump version

* Added unittests

* Fix comment

* Added JSDC doc to new positions

Author: kullJul

.github/workflows/release.yml

@@ -1,5 +1,5 @@
 
-name: Release Build
+name: release
 
 on:
   release:

CHANGELOG.md

@@ -1,5 +1,13 @@
 ## Changelog
 
+## 8.3.0
+
+### Module `legend`
+* Added `LegendPosition.TopRight` and `LegendPosition.BottomRight` — horizontal legend with items right-aligned to the chart area; falls back to left-aligned with a navigation arrow on overflow.
+* Added matching `legendPosition` string constants `topRight` and `bottomRight`.
+* Exported orientation helpers: `isLeft`, `isRight`, `isTop`, `isBottom`, `isTopOrBottom`, `isCentered`, `isRightAligned`. `isTop`/`isBottom` now also match the new right-aligned variants.
+* Fixed clipping of vertical centered legends (`LeftCenter`/`RightCenter`) when items overflowed (missing `Math.max(0, ...)` clamp).
+
 ## 8.2.2
 
 * Updated packages

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "powerbi-visuals-utils-chartutils",
-  "version": "8.2.2",
+  "version": "8.3.0",
   "description": "ChartUtils",
   "main": "lib/index.js",
   "module": "lib/index.js",

package.json

@@ -46,10 +46,58 @@ export function isLeft(orientation: LegendPosition): boolean {
     }
 }
 
+export function isRight(orientation: LegendPosition): boolean {
+    switch (orientation) {
+        case LegendPosition.Right:
+        case LegendPosition.RightCenter:
+            return true;
+        default:
+            return false;
+    }
+}
+
 export function isTop(orientation: LegendPosition): boolean {
     switch (orientation) {
         case LegendPosition.Top:
         case LegendPosition.TopCenter:
+        case LegendPosition.TopRight:
+            return true;
+        default:
+            return false;
+    }
+}
+
+export function isBottom(orientation: LegendPosition): boolean {
+    switch (orientation) {
+        case LegendPosition.Bottom:
+        case LegendPosition.BottomCenter:
+        case LegendPosition.BottomRight:
+            return true;
+        default:
+            return false;
+    }
+}
+
+export function isTopOrBottom(orientation: LegendPosition): boolean {
+    return isTop(orientation) || isBottom(orientation);
+}
+
+export function isCentered(orientation: LegendPosition): boolean {
+    switch (orientation) {
+        case LegendPosition.TopCenter:
+        case LegendPosition.BottomCenter:
+        case LegendPosition.LeftCenter:
+        case LegendPosition.RightCenter:
+            return true;
+        default:
+            return false;
+    }
+}
+
+export function isRightAligned(orientation: LegendPosition): boolean {
+    switch (orientation) {
+        case LegendPosition.TopRight:
+        case LegendPosition.BottomRight:
             return true;
         default:
             return false;

src/legend/legend.ts

@@ -39,6 +39,20 @@ export enum LegendPosition {
     BottomCenter,
     RightCenter,
     LeftCenter,
+    /**
+     * Horizontal legend above the chart, items right-aligned to the chart area.
+     * On overflow falls back to left-aligned layout with a navigation arrow
+     * (when the legend is scrollable), instead of keeping right alignment with
+     * horizontal clipping/scroll. This mirrors the native Power BI legend behavior.
+     */
+    TopRight,
+    /**
+     * Horizontal legend below the chart, items right-aligned to the chart area.
+     * On overflow falls back to left-aligned layout with a navigation arrow
+     * (when the legend is scrollable), instead of keeping right alignment with
+     * horizontal clipping/scroll. This mirrors the native Power BI legend behavior.
+     */
+    BottomRight,
 }
 
 export interface ISelectableDataPoint{

src/legend/legendInterfaces.ts

@@ -32,3 +32,5 @@ export const topCenter: string = "TopCenter";
 export const bottomCenter: string = "BottomCenter";
 export const leftCenter: string = "LeftCenter";
 export const rightCenter: string = "RightCenter";
+export const topRight: string = "TopRight";
+export const bottomRight: string = "BottomRight";

src/legend/legendPosition.ts

@@ -39,6 +39,7 @@ import {
 } from "powerbi-visuals-utils-svgutils";
 
 import { ILegend, LegendData, LegendDataPoint, LegendPosition } from "./legendInterfaces";
+import { isBottom, isRight, isTopOrBottom, isCentered, isRightAligned } from "./legend";
 
 import * as Markers from "./markers";
 
@@ -168,14 +169,11 @@ export class SVGLegend implements ILegend {
             "width", legendViewport.width || (orientation === LegendPosition.None ? 0 : this.parentViewport.width)
         );
 
-        const isRight = orientation === LegendPosition.Right || orientation === LegendPosition.RightCenter,
-            isBottom = orientation === LegendPosition.Bottom || orientation === LegendPosition.BottomCenter;
-
         this.svg.style(
-            "margin-left", isRight ? (this.parentViewport.width - legendViewport.width) + "px" : null
+            "margin-left", isRight(orientation) ? (this.parentViewport.width - legendViewport.width) + "px" : null
         );
         this.svg.style(
-            "margin-top", isBottom ? (this.parentViewport.height - legendViewport.height) + "px" : null,
+            "margin-top", isBottom(orientation) ? (this.parentViewport.height - legendViewport.height) + "px" : null,
         );
     }
 
@@ -185,6 +183,8 @@ export class SVGLegend implements ILegend {
             case LegendPosition.Bottom:
             case LegendPosition.TopCenter:
             case LegendPosition.BottomCenter:
+            case LegendPosition.TopRight:
+            case LegendPosition.BottomRight:
                 const pixelHeight = PixelConverter.fromPointToPixel(this.data && this.data.fontSize
                     ? this.data.fontSize
                     : SVGLegend.DefaultFontSizeInPt);
@@ -259,7 +259,7 @@ export class SVGLegend implements ILegend {
 
         // Adding back the workaround for Legend Left/Right position for Map
         const mapControls = this.element.getElementsByClassName("mapControl");
-        if (mapControls.length > 0 && !this.isTopOrBottom(this.orientation)) {
+        if (mapControls.length > 0 && !isTopOrBottom(this.orientation)) {
             for (let i = 0; i < mapControls.length; ++i) {
                 const element = <HTMLElement>mapControls[i];
                 element.style.display = "inline-block";
@@ -274,18 +274,22 @@ export class SVGLegend implements ILegend {
 
         const group = this.group;
 
-        // transform the wrapping group if position is centered
-        if (this.isCentered(this.orientation)) {
+        // transform the wrapping group if position is centered or right-aligned
+        if (isCentered(this.orientation)) {
             let centerOffset = 0;
-            if (this.isTopOrBottom(this.orientation)) {
+            if (isTopOrBottom(this.orientation)) {
                 centerOffset = Math.max(0, (this.parentViewport.width - this.visibleLegendWidth) / 2);
                 group.attr("transform", svgManipulation.translate(centerOffset, 0));
             }
             else {
-                centerOffset = Math.max((this.parentViewport.height - this.visibleLegendHeight) / 2);
+                centerOffset = Math.max(0, (this.parentViewport.height - this.visibleLegendHeight) / 2);
                 group.attr("transform", svgManipulation.translate(0, centerOffset));
             }
         }
+        else if (isRightAligned(this.orientation)) {
+            const rightOffset = Math.max(0, this.parentViewport.width - this.visibleLegendWidth);
+            group.attr("transform", svgManipulation.translate(rightOffset, 0));
+        }
         else {
             group.attr("transform", null);
         }
@@ -444,7 +448,7 @@ export class SVGLegend implements ILegend {
         const hasTitle = !!title;
 
         if (hasTitle) {
-            const isHorizontal = this.isTopOrBottom(this.orientation);
+            const isHorizontal = isTopOrBottom(this.orientation);
 
             const textProperties = SVGLegend.getTextProperties(title, this.data.fontSize, this.data.fontFamily);
             let text = title;
@@ -498,7 +502,7 @@ export class SVGLegend implements ILegend {
         let navArrows: NavigationArrow[];
         let numberOfItems: number;
 
-        if (this.isTopOrBottom(this.orientation)) {
+        if (isTopOrBottom(this.orientation)) {
             navArrows = this.isScrollable ? this.calculateHorizontalNavigationArrowsLayout(title) : [];
             numberOfItems = this.calculateHorizontalLayout(dataPoints, title, navArrows);
         }
@@ -786,6 +790,23 @@ export class SVGLegend implements ILegend {
         }
 
         this.visibleLegendWidth = occupiedWidth;
+
+        // When the legend is right-aligned (TopRight/BottomRight):
+        //  - If everything fits, the group is translated to the right edge in
+        //    drawLegendInternal and items render right-aligned.
+        //  - If items overflow, we unconditionally fall back to left-aligned
+        //    rendering by setting visibleLegendWidth to the full parent width so
+        //    the translation in drawLegendInternal becomes 0. This matches the
+        //    standard Top/Bottom overflow layout.
+        //    When scrolling is enabled (isScrollable), updateNavigationArrowLayout
+        //    will additionally place the "next" arrow at the right edge of the
+        //    viewport (parentViewport.width - LegendArrowWidth); when scrolling
+        //    is disabled, navigationArrows is empty and no arrow is rendered, but
+        //    the left-aligned fallback still applies.
+        if (isRightAligned(this.orientation) && numberOfItems !== dataPointsLength) {
+            this.visibleLegendWidth = this.parentViewport.width;
+        }
+
         this.updateNavigationArrowLayout(navigationArrows, dataPointsLength, numberOfItems);
 
         return numberOfItems;
@@ -955,30 +976,6 @@ export class SVGLegend implements ILegend {
             .attr("transform", (d: NavigationArrow) => d.rotateTransform);
     }
 
-    private isTopOrBottom(orientation: LegendPosition): boolean {
-        switch (orientation) {
-            case LegendPosition.Top:
-            case LegendPosition.Bottom:
-            case LegendPosition.BottomCenter:
-            case LegendPosition.TopCenter:
-                return true;
-            default:
-                return false;
-        }
-    }
-
-    private isCentered(orientation: LegendPosition): boolean {
-        switch (orientation) {
-            case LegendPosition.BottomCenter:
-            case LegendPosition.LeftCenter:
-            case LegendPosition.RightCenter:
-            case LegendPosition.TopCenter:
-                return true;
-            default:
-                return false;
-        }
-    }
-
     public reset(): void { }
 
     private static getTextProperties(