@gooddata/sdk-ui-vis-commons 11.47.0-alpha.0 → 11.47.0-alpha.2

package/esm/index.d.ts

@@ -20,6 +20,7 @@ export { ColorLegend, type IColorLegendProps } from "./legend/ColorLegend.js";
 export { Paging, type IPagingProps, type ButtonsOrientationType } from "./legend/Paging.js";
 export { HeadlinePagination, type IHeadlinePaginationProps } from "./compactSize/HeadlinePagination.js";
 export { formatLegendLabel, shouldShowFluid, FLUID_LEGEND_THRESHOLD } from "./legend/helpers.js";
+export { POINT_SHAPE_POLYGONS, CUSTOM_POINT_SHAPES, getPointShapeClipPath, getPointShapeSvgPath, } from "./legend/pointShapes.js";
 export { type PositionType, type IColorLegendItem, type IGeoCategoryLegendItem, type IGeoChartLegendData, type IHeatmapLegendItem, type ILegendOptions, type IPushpinCategoryLegendItem, type IRange, type LegendOptionsItemType, type ItemBorderRadiusPredicate, type IColorLegendSize, type ISeriesItem, type ILegendGroup, type IGroupedSeries, type IGroupedSeriesItem, type ISeriesItemMetric, type ISeriesItemSeparator, type ISeriesItemAxisIndicator, DEFAULT_LEGEND_CONFIG, LegendPosition, SupportedLegendPositions, isLegendGroup, isSeriesItemMetric, isSeriesItemSeparator, isSeriesItemAxisIndicator, LEGEND_AXIS_INDICATOR, LEGEND_SEPARATOR, LEGEND_GROUP, } from "./legend/types.js";
 export { fixEmptyHeaderItems } from "./utils/fixEmptyHeaderItems.js";
 export { valueWithEmptyHandling } from "./utils/valueWithEmptyHandling.js";

package/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/esm/index.js

@@ -21,6 +21,7 @@ export { ColorLegend } from "./legend/ColorLegend.js";
 export { Paging } from "./legend/Paging.js";
 export { HeadlinePagination } from "./compactSize/HeadlinePagination.js";
 export { formatLegendLabel, shouldShowFluid, FLUID_LEGEND_THRESHOLD } from "./legend/helpers.js";
+export { POINT_SHAPE_POLYGONS, CUSTOM_POINT_SHAPES, getPointShapeClipPath, getPointShapeSvgPath, } from "./legend/pointShapes.js";
 export { DEFAULT_LEGEND_CONFIG, LegendPosition, SupportedLegendPositions, isLegendGroup, isSeriesItemMetric, isSeriesItemSeparator, isSeriesItemAxisIndicator, LEGEND_AXIS_INDICATOR, LEGEND_SEPARATOR, LEGEND_GROUP, } from "./legend/types.js";
 export { fixEmptyHeaderItems } from "./utils/fixEmptyHeaderItems.js";
 export { valueWithEmptyHandling } from "./utils/valueWithEmptyHandling.js";

package/esm/legend/LegendItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LegendItem.d.ts","sourceRoot":"","sources":["../../src/legend/LegendItem.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAMlD,OAAO,EAAE,KAAK,aAAa,EAAuB,MAAM,sBAAsB,CAAC;AAG/E,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAIpD,UAAU,gBAAgB;IACtB,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,WAAW,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,aAAa,CAAC;CAC7B;AAoID,eAAO,MAAM,UAAU,mGAsGrB,CAAC"}
+{"version":3,"file":"LegendItem.d.ts","sourceRoot":"","sources":["../../src/legend/LegendItem.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAMlD,OAAO,EAAE,KAAK,aAAa,EAAuB,MAAM,sBAAsB,CAAC;AAI/E,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAIpD,UAAU,gBAAgB;IACtB,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,WAAW,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,aAAa,CAAC;CAC7B;AAqFD,eAAO,MAAM,UAAU,mGAsGrB,CAAC"}

package/esm/legend/LegendItem.js

@@ -8,6 +8,7 @@ import { withTheme } from "@gooddata/sdk-ui-theme-provider";
 import { getDarkerColor, isPatternObject } from "../coloring/color.js";
 import { PatternFill } from "../coloring/PatternFill.js";
 import { LegendSeriesContextStore, useItemVisibility } from "./context.js";
+import { getPointShapeClipPath } from "./pointShapes.js";
 const DEFAULT_DISABLED_COLOR = "#CCCCCC";
 function getPointShapeStyles(pointShape, iconSize, enableBorderRadius) {
     if (!pointShape) {
@@ -26,14 +27,6 @@ function getPointShapeStyles(pointShape, iconSize, enableBorderRadius) {
                 width: `${Math.round(iconSize * 0.7)}px`,
                 height: `${Math.round(iconSize * 0.7)}px`,
             };
-        case "triangle":
-        case "triangle-down":
-            return {
-                borderRadius: "0",
-                width: "0",
-                height: "0",
-                backgroundColor: "transparent",
-            };
         case "circle":
         default:
             return {
@@ -41,62 +34,30 @@ function getPointShapeStyles(pointShape, iconSize, enableBorderRadius) {
             };
     }
 }
-function getTrianglePointShapesStyles(pointShape, chartFill, triangleColor, iconSize) {
-    const isTriangle = pointShape === "triangle" || pointShape === "triangle-down";
-    if (!isTriangle) {
-        return {};
-    }
-    const triangleStyles = {
-        width: `${iconSize}px`,
-        height: `${iconSize}px`,
-    };
-    // For pattern and outline fills, we need actual area for content/border
-    // Use clip-path method for these cases
-    if (chartFill === "pattern" || chartFill === "outline") {
-        if (pointShape === "triangle") {
-            triangleStyles.clipPath = "polygon(50% 0%, 0% 100%, 100% 100%)";
-        }
-        else if (pointShape === "triangle-down") {
-            triangleStyles.clipPath = "polygon(0% 0%, 100% 0%, 50% 100%)";
-        }
-    }
-    else {
-        // Use border method for solid fills only - ensure clip-path is reset
-        triangleStyles.clipPath = "none";
-        if (pointShape === "triangle") {
-            triangleStyles.borderLeft = `${iconSize / 2}px solid transparent`;
-            triangleStyles.borderRight = `${iconSize / 2}px solid transparent`;
-            triangleStyles.borderBottom = `${iconSize}px solid ${triangleColor}`;
-            triangleStyles.borderTop = "none";
-        }
-        else if (pointShape === "triangle-down") {
-            triangleStyles.borderLeft = `${iconSize / 2}px solid transparent`;
-            triangleStyles.borderRight = `${iconSize / 2}px solid transparent`;
-            triangleStyles.borderTop = `${iconSize}px solid ${triangleColor}`;
-            triangleStyles.borderBottom = "none";
-        }
-    }
-    return triangleStyles;
-}
 function getIconStyle(type, chartFill, color, enableBorderRadius, isVisible, pointShape) {
     // line and bullet target series should always be solid
     const appliedChartFill = type === "line" || type === "bullet" ? "solid" : chartFill;
     // use default color if color is not provided (this should not happen at this stage)
     const baseColor = (isPatternObject(color) ? color.pattern.color : color) ?? DEFAULT_DISABLED_COLOR;
     const iconSize = 9;
-    // For triangles, we need special CSS border handling to create the triangle shape
-    const isTriangle = pointShape === "triangle" || pointShape === "triangle-down";
-    const baseCssProps = {
-        ...getPointShapeStyles(pointShape, iconSize, enableBorderRadius),
-        ...getTrianglePointShapesStyles(pointShape, appliedChartFill, baseColor, iconSize),
-    };
+    // Polygonal shapes (triangles, star, pentagon, cross, ...) are rendered with a CSS clip-path
+    // derived from the same normalized geometry as the Highcharts markers; the fill mode is
+    // applied by the switch below.
+    const clipPath = getPointShapeClipPath(pointShape);
+    const baseCssProps = clipPath
+        ? {
+            clipPath,
+            width: `${iconSize}px`,
+            height: `${iconSize}px`,
+        }
+        : getPointShapeStyles(pointShape, iconSize, enableBorderRadius);
     switch (appliedChartFill) {
         case "pattern":
             return {
                 ...baseCssProps,
                 color: baseColor,
-                // Don't override triangle borders
-                border: isTriangle ? undefined : `1px solid ${baseColor}`,
+                // a border on clip-path shapes would be clipped away
+                border: clipPath ? undefined : `1px solid ${baseColor}`,
                 position: "relative",
                 backgroundColor: isVisible ? "transparent" : baseColor,
             };
@@ -110,7 +71,7 @@ function getIconStyle(type, chartFill, color, enableBorderRadius, isVisible, poi
         default:
             return {
                 ...baseCssProps,
-                backgroundColor: isTriangle ? "transparent" : baseColor,
+                backgroundColor: baseColor,
             };
     }
 }

package/esm/legend/pointShapes.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Polygonal point-shape geometry shared by chart markers and legend icons.
+ *
+ * @remarks
+ * Highcharts ships only five marker symbols ("circle", "square", "diamond", "triangle",
+ * "triangle-down"). Any other symbol name handed to a marker silently falls back to "circle".
+ * To support the full documented set of point shapes we describe each polygonal shape as a polygon
+ * in a normalized 0..1 box (origin top-left, y pointing down) and derive both the Highcharts SVG
+ * marker path and the legend CSS `clip-path` from the same geometry so chart markers and legend
+ * icons always match. The built-in "triangle" and "triangle-down" are included for the legend
+ * `clip-path` only — they are never registered as custom Highcharts symbols.
+ *
+ * @internal
+ */
+export declare const POINT_SHAPE_POLYGONS: Record<string, ReadonlyArray<readonly [number, number]>>;
+/**
+ * Names of the custom (non built-in) point-shape symbols to register on the Highcharts renderer.
+ *
+ * @internal
+ */
+export declare const CUSTOM_POINT_SHAPES: string[];
+/**
+ * Returns a CSS `clip-path` polygon for a polygonal point shape (including the built-in triangles),
+ * or `undefined` when the shape has no polygon geometry (circle/square/diamond) and is handled by
+ * plain CSS elsewhere.
+ *
+ * @internal
+ */
+export declare function getPointShapeClipPath(pointShape: string | undefined): string | undefined;
+/**
+ * Builds a Highcharts SVG marker path (array of path segments) for a custom point shape within the
+ * bounding box defined by `x`, `y`, `width`, `height`. Returns `undefined` for unknown / built-in
+ * shapes so callers can defer to Highcharts.
+ *
+ * @internal
+ */
+export declare function getPointShapeSvgPath(pointShape: string, x: number, y: number, width: number, height: number): Array<Array<string | number>> | undefined;
+//# sourceMappingURL=pointShapes.d.ts.map

package/esm/legend/pointShapes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pointShapes.d.ts","sourceRoot":"","sources":["../../src/legend/pointShapes.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAqGzF,CAAC;AAIF;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,EAAE,MAAM,EAEvC,CAAC;AAMF;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAYxF;AAED;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAChC,UAAU,EAAE,MAAM,EAClB,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,GACf,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,GAAG,SAAS,CAU3C"}

package/esm/legend/pointShapes.js

@@ -0,0 +1,162 @@
+// (C) 2026 GoodData Corporation
+/**
+ * Polygonal point-shape geometry shared by chart markers and legend icons.
+ *
+ * @remarks
+ * Highcharts ships only five marker symbols ("circle", "square", "diamond", "triangle",
+ * "triangle-down"). Any other symbol name handed to a marker silently falls back to "circle".
+ * To support the full documented set of point shapes we describe each polygonal shape as a polygon
+ * in a normalized 0..1 box (origin top-left, y pointing down) and derive both the Highcharts SVG
+ * marker path and the legend CSS `clip-path` from the same geometry so chart markers and legend
+ * icons always match. The built-in "triangle" and "triangle-down" are included for the legend
+ * `clip-path` only — they are never registered as custom Highcharts symbols.
+ *
+ * @internal
+ */
+export const POINT_SHAPE_POLYGONS = {
+    triangle: [
+        [0.5, 0],
+        [1, 1],
+        [0, 1],
+    ],
+    "triangle-down": [
+        [0, 0],
+        [1, 0],
+        [0.5, 1],
+    ],
+    // alias of the built-in "triangle" so the documented "triangle-up" name renders too
+    "triangle-up": [
+        [0.5, 0],
+        [1, 1],
+        [0, 1],
+    ],
+    "triangle-left": [
+        [0, 0.5],
+        [1, 0],
+        [1, 1],
+    ],
+    "triangle-right": [
+        [0, 0],
+        [1, 0.5],
+        [0, 1],
+    ],
+    pentagon: [
+        [0.5, 0],
+        [0.9755, 0.3455],
+        [0.7939, 0.9045],
+        [0.2061, 0.9045],
+        [0.0245, 0.3455],
+    ],
+    hexagon: [
+        [0.25, 0],
+        [0.75, 0],
+        [1, 0.5],
+        [0.75, 1],
+        [0.25, 1],
+        [0, 0.5],
+    ],
+    octagon: [
+        [0.3, 0],
+        [0.7, 0],
+        [1, 0.3],
+        [1, 0.7],
+        [0.7, 1],
+        [0.3, 1],
+        [0, 0.7],
+        [0, 0.3],
+    ],
+    star: [
+        [0.5, 0],
+        [0.6176, 0.3382],
+        [0.9755, 0.3455],
+        [0.6902, 0.5618],
+        [0.7939, 0.9045],
+        [0.5, 0.7],
+        [0.2061, 0.9045],
+        [0.3098, 0.5618],
+        [0.0245, 0.3455],
+        [0.3824, 0.3382],
+    ],
+    plus: [
+        [0.35, 0],
+        [0.65, 0],
+        [0.65, 0.35],
+        [1, 0.35],
+        [1, 0.65],
+        [0.65, 0.65],
+        [0.65, 1],
+        [0.35, 1],
+        [0.35, 0.65],
+        [0, 0.65],
+        [0, 0.35],
+        [0.35, 0.35],
+    ],
+    cross: [
+        [0.2, 0],
+        [0.5, 0.3],
+        [0.8, 0],
+        [1, 0.2],
+        [0.7, 0.5],
+        [1, 0.8],
+        [0.8, 1],
+        [0.5, 0.7],
+        [0.2, 1],
+        [0, 0.8],
+        [0.3, 0.5],
+        [0, 0.2],
+    ],
+    arrow: [
+        [0.5, 0],
+        [1, 0.5],
+        [0.7, 0.5],
+        [0.7, 1],
+        [0.3, 1],
+        [0.3, 0.5],
+        [0, 0.5],
+    ],
+};
+const HIGHCHARTS_BUILT_IN_POINT_SHAPES = ["circle", "square", "diamond", "triangle", "triangle-down"];
+/**
+ * Names of the custom (non built-in) point-shape symbols to register on the Highcharts renderer.
+ *
+ * @internal
+ */
+export const CUSTOM_POINT_SHAPES = Object.keys(POINT_SHAPE_POLYGONS).filter((shape) => !HIGHCHARTS_BUILT_IN_POINT_SHAPES.includes(shape));
+function roundPercent(value) {
+    return Math.round(value * 10000) / 100;
+}
+/**
+ * Returns a CSS `clip-path` polygon for a polygonal point shape (including the built-in triangles),
+ * or `undefined` when the shape has no polygon geometry (circle/square/diamond) and is handled by
+ * plain CSS elsewhere.
+ *
+ * @internal
+ */
+export function getPointShapeClipPath(pointShape) {
+    if (!pointShape) {
+        return undefined;
+    }
+    const polygon = POINT_SHAPE_POLYGONS[pointShape];
+    if (!polygon) {
+        return undefined;
+    }
+    const points = polygon.map(([x, y]) => `${roundPercent(x)}% ${roundPercent(y)}%`).join(", ");
+    return `polygon(${points})`;
+}
+/**
+ * Builds a Highcharts SVG marker path (array of path segments) for a custom point shape within the
+ * bounding box defined by `x`, `y`, `width`, `height`. Returns `undefined` for unknown / built-in
+ * shapes so callers can defer to Highcharts.
+ *
+ * @internal
+ */
+export function getPointShapeSvgPath(pointShape, x, y, width, height) {
+    const polygon = POINT_SHAPE_POLYGONS[pointShape];
+    if (!polygon) {
+        return undefined;
+    }
+    return [
+        ...polygon.map(([nx, ny], index) => [index === 0 ? "M" : "L", x + nx * width, y + ny * height]),
+        ["Z"],
+    ];
+}

package/esm/sdk-ui-vis-commons.d.ts

@@ -156,6 +156,13 @@ export declare const ColorUtils: {
  */
 export declare function composeCustomTooltipSectionHtml(content: string, inChartValues: IResolvedReferenceValues, externalValues: IResolvedReferenceValues, localizedStrings: ITooltipLocalizedStrings): string;
 
+/**
+ * Names of the custom (non built-in) point-shape symbols to register on the Highcharts renderer.
+ *
+ * @internal
+ */
+export declare const CUSTOM_POINT_SHAPES: string[];
+
 /**
  * Placement of the custom tooltip section relative to the default tooltip content.
  *
@@ -288,6 +295,24 @@ export declare function getPatternFillByIndex(index: number): IPatternOptionsObj
  */
 export declare function getPatternFillByName(name: PatternFillName): IPatternOptionsObject | undefined;
 
+/**
+ * Returns a CSS `clip-path` polygon for a polygonal point shape (including the built-in triangles),
+ * or `undefined` when the shape has no polygon geometry (circle/square/diamond) and is handled by
+ * plain CSS elsewhere.
+ *
+ * @internal
+ */
+export declare function getPointShapeClipPath(pointShape: string | undefined): string | undefined;
+
+/**
+ * Builds a Highcharts SVG marker path (array of path segments) for a custom point shape within the
+ * bounding box defined by `x`, `y`, `width`, `height`. Returns `undefined` for unknown / built-in
+ * shapes so callers can defer to Highcharts.
+ *
+ * @internal
+ */
+export declare function getPointShapeSvgPath(pointShape: string, x: number, y: number, width: number, height: number): Array<Array<string | number>> | undefined;
+
 /**
  * @internal
  */
@@ -1019,6 +1044,22 @@ export declare function PatternFill({ patternFill }: IPatternFillProps): JSX.Ele
  */
 export declare type PatternFillName = (typeof PATTERN_FILLS)[number]["name"];
 
+/**
+ * Polygonal point-shape geometry shared by chart markers and legend icons.
+ *
+ * @remarks
+ * Highcharts ships only five marker symbols ("circle", "square", "diamond", "triangle",
+ * "triangle-down"). Any other symbol name handed to a marker silently falls back to "circle".
+ * To support the full documented set of point shapes we describe each polygonal shape as a polygon
+ * in a normalized 0..1 box (origin top-left, y pointing down) and derive both the Highcharts SVG
+ * marker path and the legend CSS `clip-path` from the same geometry so chart markers and legend
+ * icons always match. The built-in "triangle" and "triangle-down" are included for the legend
+ * `clip-path` only — they are never registered as custom Highcharts symbols.
+ *
+ * @internal
+ */
+export declare const POINT_SHAPE_POLYGONS: Record<string, ReadonlyArray<readonly [number, number]>>;
+
 /**
  * @internal
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-vis-commons",
-  "version": "11.47.0-alpha.0",
+  "version": "11.47.0-alpha.2",
   "description": "GoodData.UI SDK - common functionality for different types of visualizations",
   "license": "MIT",
   "author": "GoodData Corporation",
@@ -36,11 +36,11 @@
     "react-intl": "7.1.11",
     "react-measure": "^2.5.2",
     "tslib": "2.8.1",
-    "@gooddata/sdk-model": "11.47.0-alpha.0",
-    "@gooddata/sdk-backend-spi": "11.47.0-alpha.0",
-    "@gooddata/sdk-ui": "11.47.0-alpha.0",
-    "@gooddata/sdk-ui-kit": "11.47.0-alpha.0",
-    "@gooddata/sdk-ui-theme-provider": "11.47.0-alpha.0"
+    "@gooddata/sdk-backend-spi": "11.47.0-alpha.2",
+    "@gooddata/sdk-model": "11.47.0-alpha.2",
+    "@gooddata/sdk-ui": "11.47.0-alpha.2",
+    "@gooddata/sdk-ui-theme-provider": "11.47.0-alpha.2",
+    "@gooddata/sdk-ui-kit": "11.47.0-alpha.2"
   },
   "devDependencies": {
     "@microsoft/api-documenter": "^7.17.0",
@@ -81,11 +81,11 @@
     "typescript": "5.9.3",
     "vitest": "4.1.8",
     "vitest-dom": "0.1.1",
-    "@gooddata/eslint-config": "11.47.0-alpha.0",
-    "@gooddata/oxlint-config": "11.47.0-alpha.0",
-    "@gooddata/reference-workspace": "11.47.0-alpha.0",
-    "@gooddata/sdk-backend-mockingbird": "11.47.0-alpha.0",
-    "@gooddata/stylelint-config": "11.47.0-alpha.0"
+    "@gooddata/eslint-config": "11.47.0-alpha.2",
+    "@gooddata/oxlint-config": "11.47.0-alpha.2",
+    "@gooddata/sdk-backend-mockingbird": "11.47.0-alpha.2",
+    "@gooddata/reference-workspace": "11.47.0-alpha.2",
+    "@gooddata/stylelint-config": "11.47.0-alpha.2"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",