@gooddata/sdk-ui-vis-commons 10.42.0-alpha.2 → 10.42.0-alpha.3

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

@@ -46,10 +46,30 @@ export declare function calculateHeadlineHeightFontSize(secondaryItem?: boolean,
     fontSize: number | undefined;
 };
 
+/**
+ * Chart fill config is used to customize the chart fill.
+ *
+ * @internal
+ */
+export declare interface ChartFillConfig {
+    /**
+     * Type of the chart fill.
+     */
+    type?: ChartFillType;
+    /**
+     * Custom mapping of selected pattern fill by measure.
+     * The value is map of measure local identifiers per pattern name.
+     * The property is used when type == "pattern".
+     * When insight has a measure that is not mapped, the pattern will be assigned according to the
+     * measure index, the same way as if no measure would be mapped.
+     */
+    measureToPatternName?: Record<string, PatternFillName>;
+}
+
 /**
  * @public
  */
-export declare type ChartFill = "solid" | "pattern" | "outline";
+export declare type ChartFillType = "solid" | "pattern" | "outline";
 
 /**
  * @internal
@@ -178,6 +198,18 @@ export declare function getLighterColor(color: string, percent: number): string;
  */
 export declare function getLighterColorFromRGB(color: IRgbColorValue, percent: number): IRgbColorValue;
 
+/**
+ * Returns pattern fill by index.
+ *
+ * @param index - Index of pattern fill. When the index is a number, it returns a pattern matching
+ *  the index number of the pattern array. When the index is out of bounds, the pattern fill is repeated.
+ *  When the index is a pattern name, the matching pattern is returned. If the pattern is not found,
+ *  the first pattern is returned.
+ *
+ * @internal
+ */
+export declare function getPatternFill(index: number | PatternFillName): IPatternOptionsObject;
+
 /**
  * Returns pattern fill by index. When index is out of bounds, the pattern fill is repeated.
  * @param index - index of pattern fill
@@ -228,17 +260,6 @@ export declare function HeadlinePagination({ renderSecondaryItem, renderTertiary
  */
 export declare const HeatmapLegend: React_2.NamedExoticComponent<IHeatmapLegendProps>;
 
-/**
- * @internal
- */
-export declare interface IBaseLegendItem {
-    name: string;
-    color: string;
-    legendIndex: number;
-    yAxis: number;
-    pointShape?: string;
-}
-
 /**
  * @internal
  */
@@ -310,7 +331,7 @@ export declare interface IFluidLegendProps {
     series: IPushpinCategoryLegendItem[];
     enableBorderRadius?: boolean | ItemBorderRadiusPredicate;
     onItemClick?(item: IPushpinCategoryLegendItem): void;
-    chartFill?: ChartFill;
+    chartFill?: ChartFillType;
 }
 
 /**
@@ -321,6 +342,16 @@ export declare interface IGeoChartLegendData {
     sizeData?: number[];
 }
 
+/**
+ * @internal
+ */
+export declare type IGroupedSeries = IGroupedSeriesItem[];
+
+/**
+ * @internal
+ */
+export declare type IGroupedSeriesItem = ISeriesItem | ILegendGroup;
+
 /**
  * @internal
  */
@@ -375,6 +406,14 @@ export declare interface ILegendDetails {
     renderPopUp?: boolean;
 }
 
+/**
+ * @internal
+ */
+export declare type ILegendGroup = Omit<ISeriesItemAxisIndicator, "type"> & {
+    type: typeof LEGEND_GROUP;
+    items: ISeriesItem[];
+};
+
 /**
  * @internal
  */
@@ -406,7 +445,7 @@ export declare interface ILegendProps {
     locale?: string;
     showFluidLegend?: boolean;
     enableBorderRadius?: boolean | ItemBorderRadiusPredicate;
-    chartFill?: ChartFill;
+    chartFill?: ChartFillType;
     onItemClick(item: ISeriesItem): void;
     validateOverHeight(legendClient: Rect): void;
     contentDimensions: {
@@ -469,7 +508,7 @@ export declare interface IPopUpLegendProps {
     containerId: string;
     customComponent?: ReactElement | null;
     customComponentName?: string;
-    chartFill?: ChartFill;
+    chartFill?: ChartFillType;
 }
 
 /**
@@ -480,7 +519,7 @@ export declare interface IPushpinCategoryLegendItem {
     uri: string;
     color?: string;
     legendIndex: number;
-    isVisible?: boolean;
+    isVisible: boolean;
 }
 
 /**
@@ -497,22 +536,44 @@ export declare interface IRange {
 export declare function isCustomPalette(palette: IColorPalette): boolean;
 
 /**
- * The items can have many different properties, the data can come from many different sources.
- * The components like to use a lot of `any` for the item types, which poisons the type checking further down.
- * These are the keys that are definitely used in different cases, but the whole type situation here could use a lot of work.
- *
  * @internal
  */
-export declare type ISeriesItem = {
+export declare type ISeriesItem = ISeriesItemMetric | ISeriesItemAxisIndicator | ISeriesItemSeparator;
+
+/**
+ * @internal
+ */
+export declare type ISeriesItemAxisIndicator = {
+    type: typeof LEGEND_AXIS_INDICATOR;
+    data?: string[];
+    labelKey: string;
+};
+
+/**
+ * @internal
+ */
+export declare type ISeriesItemMetric = {
+    type?: string;
     isVisible?: boolean;
     name?: string;
     color?: string | IPatternObject;
-    type?: string;
-    labelKey?: string;
-    data?: string[];
+    legendIndex: number;
     pointShape?: string;
+    yAxis?: number;
+};
+
+/**
+ * @internal
+ */
+export declare type ISeriesItemSeparator = {
+    type: typeof LEGEND_SEPARATOR;
 };
 
+/**
+ * @internal
+ */
+export declare function isLegendGroup(item: IGroupedSeriesItem): item is ILegendGroup;
+
 /**
  * Test whether the color is a pattern object.
  * @param color - tested color object
@@ -521,6 +582,21 @@ export declare type ISeriesItem = {
  */
 export declare function isPatternObject(color: string | IPatternObject | undefined): color is IPatternObject;
 
+/**
+ * @internal
+ */
+export declare function isSeriesItemAxisIndicator(item: ISeriesItem): item is ISeriesItemAxisIndicator;
+
+/**
+ * @internal
+ */
+export declare function isSeriesItemMetric(item: ISeriesItem): item is ISeriesItemMetric;
+
+/**
+ * @internal
+ */
+export declare function isSeriesItemSeparator(item: ISeriesItem): item is ISeriesItemSeparator;
+
 /**
  * @internal
  */
@@ -537,7 +613,7 @@ export declare interface IStaticLegendProps {
     isLabelVisible?: boolean;
     onItemClick?(item: ISeriesItem): void;
     onPageChanged?: (page: number) => void;
-    chartFill?: ChartFill;
+    chartFill?: ChartFillType;
 }
 
 /**
@@ -558,7 +634,22 @@ export declare const Legend: React_2.NamedExoticComponent<ILegendProps>;
 /**
  * @internal
  */
-export declare type LegendOptionsItemType = IBaseLegendItem | IHeatmapLegendItem;
+export declare const LEGEND_AXIS_INDICATOR = "legendAxisIndicator";
+
+/**
+ * @internal
+ */
+export declare const LEGEND_GROUP = "legend-group";
+
+/**
+ * @internal
+ */
+export declare const LEGEND_SEPARATOR = "legendSeparator";
+
+/**
+ * @internal
+ */
+export declare type LegendOptionsItemType = ISeriesItemMetric | IHeatmapLegendItem;
 
 /**
  * @internal

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-vis-commons",
-  "version": "10.42.0-alpha.2",
+  "version": "10.42.0-alpha.3",
   "description": "GoodData.UI SDK - common functionality for different types of visualizations",
   "repository": {
     "type": "git",
@@ -36,11 +36,11 @@
     "react-intl": "6.8.9",
     "react-measure": "^2.5.2",
     "tslib": "2.8.1",
-    "@gooddata/sdk-backend-spi": "10.42.0-alpha.2",
-    "@gooddata/sdk-model": "10.42.0-alpha.2",
-    "@gooddata/sdk-ui": "10.42.0-alpha.2",
-    "@gooddata/sdk-ui-kit": "10.42.0-alpha.2",
-    "@gooddata/sdk-ui-theme-provider": "10.42.0-alpha.2"
+    "@gooddata/sdk-backend-spi": "10.42.0-alpha.3",
+    "@gooddata/sdk-ui": "10.42.0-alpha.3",
+    "@gooddata/sdk-ui-kit": "10.42.0-alpha.3",
+    "@gooddata/sdk-model": "10.42.0-alpha.3",
+    "@gooddata/sdk-ui-theme-provider": "10.42.0-alpha.3"
   },
   "devDependencies": {
     "@gooddata/eslint-config": "^4.1.1",
@@ -60,6 +60,7 @@
     "dependency-cruiser": "^13.0.3",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-header": "^3.0.0",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-import-esm": "^1.2.1",
@@ -83,8 +84,8 @@
     "typescript": "5.8.3",
     "vitest": "3.2.4",
     "vitest-dom": "0.1.1",
-    "@gooddata/reference-workspace": "10.42.0-alpha.2",
-    "@gooddata/sdk-backend-mockingbird": "10.42.0-alpha.2"
+    "@gooddata/reference-workspace": "10.42.0-alpha.3",
+    "@gooddata/sdk-backend-mockingbird": "10.42.0-alpha.3"
   },
   "peerDependencies": {
     "react": "^16.10.0 || ^17.0.0 || ^18.0.0",

package/styles/scss/legend.scss

@@ -63,6 +63,10 @@ $legend-content-background: var(--gd-chart-backgroundColor, var(--gd-palette-com
         }
     }
 
+    .legend-group {
+        display: contents;
+    }
+
     .series-item,
     .series-axis-indicator {
         display: flex;

package/esm/legend/LegendAxisIndicator.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-export interface ILegendAxisIndicatorProps {
-    labelKey?: string;
-    data?: string[];
-    width?: number;
-}
-export declare const LegendAxisIndicator: React.NamedExoticComponent<ILegendAxisIndicatorProps>;
-//# sourceMappingURL=LegendAxisIndicator.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"LegendAxisIndicator.d.ts","sourceRoot":"","sources":["../../src/legend/LegendAxisIndicator.tsx"],"names":[],"mappings":"AACA,OAAO,KAAe,MAAM,OAAO,CAAC;AAMpC,MAAM,WAAW,yBAAyB;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,mBAAmB,uDA0B9B,CAAC"}

package/esm/legend/LegendAxisIndicator.js

@@ -1,17 +0,0 @@
-// (C) 2019-2025 GoodData Corporation
-import React, { memo } from "react";
-import { useIntl } from "react-intl";
-import { messages } from "../locales.js";
-export const LegendAxisIndicator = memo(function LegendAxisIndicator({ labelKey, width, data, }) {
-    const intl = useIntl();
-    const style = width ? { width: `${width}px` } : {};
-    const values = (data || []).reduce((result, key, index) => {
-        result[index] = intl.formatMessage(messages[key]);
-        return result;
-    }, {});
-    return (React.createElement("div", { style: style, className: "series-axis-indicator", "aria-label": "Legend axis indicator", "data-testid": "legend-axis-indicator" },
-        React.createElement("div", { className: "series-text" },
-            intl.formatMessage(messages[labelKey], values),
-            intl.formatMessage(messages["colon"]))));
-});
-//# sourceMappingURL=LegendAxisIndicator.js.map

package/esm/legend/LegendAxisIndicator.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"LegendAxisIndicator.js","sourceRoot":"","sources":["../../src/legend/LegendAxisIndicator.tsx"],"names":[],"mappings":"AAAA,qCAAqC;AACrC,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAQzC,MAAM,CAAC,MAAM,mBAAmB,GAAG,IAAI,CAAC,SAAS,mBAAmB,CAAC,EACjE,QAAQ,EACR,KAAK,EACL,IAAI,GACoB;IACxB,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IAEvB,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACnD,MAAM,MAAM,GAAG,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,MAAmC,EAAE,GAAW,EAAE,KAAa,EAAE,EAAE;QACnG,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,GAA4B,CAAC,CAAC,CAAC;QAC3E,OAAO,MAAM,CAAC;IAClB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACH,6BACI,KAAK,EAAE,KAAK,EACZ,SAAS,EAAC,uBAAuB,gBACtB,uBAAuB,iBACrB,uBAAuB;QAEpC,6BAAK,SAAS,EAAC,aAAa;YACvB,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,QAAiC,CAAC,EAAE,MAAM,CAAC;YACvE,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CACpC,CACJ,CACT,CAAC;AACN,CAAC,CAAC,CAAC"}