@gooddata/sdk-ui-vis-commons 10.41.0-alpha.5 → 10.42.0-alpha.1

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

@@ -22,6 +22,7 @@ import { ITheme } from '@gooddata/sdk-model';
 import { default as React_2 } from 'react';
 import { ReactElement } from 'react';
 import { Rect } from 'react-measure';
+import { SVGAttributes } from 'react';
 
 /**
  * @internal
@@ -45,6 +46,11 @@ export declare function calculateHeadlineHeightFontSize(secondaryItem?: boolean,
     fontSize: number | undefined;
 };
 
+/**
+ * @public
+ */
+export declare type ChartFill = "solid" | "pattern" | "outline";
+
 /**
  * @internal
  */
@@ -140,6 +146,14 @@ export declare function getColorMappingPredicate(testValue: string): IHeaderPred
  */
 export declare function getColorPaletteFromColors(colors: string[]): IColorPalette;
 
+/**
+ * Computes WCAG contrast ratio between two colors.
+ * Accepts any web color supported by `getRgbFromWebColor` (hex, rgb/rgba, named colors).
+ *
+ * @internal
+ */
+export declare function getContrastRatio(colorA: string, colorB: string): number;
+
 /**
  * @internal
  * Provides responsive class for headline/kpi component based on its width and state of secondary item
@@ -164,6 +178,27 @@ export declare function getLighterColor(color: string, percent: number): string;
  */
 export declare function getLighterColorFromRGB(color: IRgbColorValue, percent: number): IRgbColorValue;
 
+/**
+ * Returns pattern fill by index. When index is out of bounds, the pattern fill is repeated.
+ * @param index - index of pattern fill
+ *
+ * @internal
+ */
+export declare function getPatternFillByIndex(index: number): IPatternOptionsObject;
+
+/**
+ * Returns pattern fill by key.
+ * @param name - name of a pattern fill
+ *
+ * @internal
+ */
+export declare function getPatternFillByName(name: PatternFillName): IPatternOptionsObject | undefined;
+
+/**
+ * @internal
+ */
+export declare function getRgbFromWebColor(input: string): IRgbColorValue | null;
+
 /**
  * @internal
  */
@@ -201,6 +236,7 @@ export declare interface IBaseLegendItem {
     color: string;
     legendIndex: number;
     yAxis: number;
+    pointShape?: string;
 }
 
 /**
@@ -274,6 +310,7 @@ export declare interface IFluidLegendProps {
     series: IPushpinCategoryLegendItem[];
     enableBorderRadius?: boolean | ItemBorderRadiusPredicate;
     onItemClick?(item: IPushpinCategoryLegendItem): void;
+    chartFill?: ChartFill;
 }
 
 /**
@@ -369,6 +406,7 @@ export declare interface ILegendProps {
     locale?: string;
     showFluidLegend?: boolean;
     enableBorderRadius?: boolean | ItemBorderRadiusPredicate;
+    chartFill?: ChartFill;
     onItemClick(item: ISeriesItem): void;
     validateOverHeight(legendClient: Rect): void;
     contentDimensions: {
@@ -389,6 +427,36 @@ export declare interface IPagingProps {
     buttonsOrientation?: ButtonsOrientationType;
 }
 
+/**
+ * @internal
+ */
+export declare type IPatternFill = (typeof PATTERN_FILLS)[number];
+
+/**
+ * @internal
+ */
+export declare interface IPatternFillProps {
+    patternFill: IPatternOptionsObject;
+}
+
+/**
+ * @internal
+ */
+export declare interface IPatternObject {
+    pattern: IPatternOptionsObject;
+}
+
+/**
+ * @internal
+ */
+export declare interface IPatternOptionsObject {
+    path: SVGAttributes<SVGPathElement>;
+    width: number;
+    height: number;
+    color?: string;
+    opacity?: number;
+}
+
 /**
  * @internal
  */
@@ -401,6 +469,7 @@ export declare interface IPopUpLegendProps {
     containerId: string;
     customComponent?: ReactElement | null;
     customComponentName?: string;
+    chartFill?: ChartFill;
 }
 
 /**
@@ -437,12 +506,21 @@ export declare function isCustomPalette(palette: IColorPalette): boolean;
 export declare type ISeriesItem = {
     isVisible?: boolean;
     name?: string;
-    color?: string;
+    color?: string | IPatternObject;
     type?: string;
     labelKey?: string;
     data?: string[];
+    pointShape?: string;
 };
 
+/**
+ * Test whether the color is a pattern object.
+ * @param color - tested color object
+ *
+ * @internal
+ */
+export declare function isPatternObject(color: string | IPatternObject | undefined): color is IPatternObject;
+
 /**
  * @internal
  */
@@ -459,6 +537,7 @@ export declare interface IStaticLegendProps {
     isLabelVisible?: boolean;
     onItemClick?(item: ISeriesItem): void;
     onPageChanged?: (page: number) => void;
+    chartFill?: ChartFill;
 }
 
 /**
@@ -512,6 +591,306 @@ export declare function parseRGBColorCode(color: string): {
  */
 export declare function parseRGBString(color: string): IRgbColorValue | null;
 
+/**
+ * SVG patterns used in series.color.pattern Highcharts config.
+ *
+ * The array index matches the color palette index.
+ *
+ * The name is used in visualisation property that maps selected pattern to a metric, i.e., changing it is
+ * considered a breaking change.
+ *
+ * When a pattern "strokeWidth" is undefined, \{ "stroke": "none", "fill": currentColor \} is assumed.
+ *
+ * @internal
+ */
+export declare const PATTERN_FILLS: readonly [{
+    readonly name: "diagonal_grid_small";
+    readonly pattern: {
+        readonly path: {
+            readonly d: "M4 0L8 4L4 8L0 4Z";
+            readonly strokeWidth: 1;
+        };
+        readonly width: 8;
+        readonly height: 8;
+        readonly opacity: 1;
+    };
+}, {
+    readonly name: "vertical_lines_small";
+    readonly pattern: {
+        readonly path: {
+            readonly d: "M0 0H1V4H0Z";
+            readonly strokeWidth: 1;
+        };
+        readonly width: 4;
+        readonly height: 4;
+        readonly opacity: 1;
+    };
+}, {
+    readonly name: "grid_small";
+    readonly pattern: {
+        readonly path: {
+            readonly d: "M0 0H4V4H0Z";
+            readonly strokeWidth: 1;
+        };
+        readonly width: 4;
+        readonly height: 4;
+        readonly opacity: 1;
+    };
+}, {
+    readonly name: "horizontal_lines_small";
+    readonly pattern: {
+        readonly path: {
+            readonly d: "M0 0H4V1H0Z";
+            readonly strokeWidth: 1;
+        };
+        readonly width: 4;
+        readonly height: 4;
+        readonly opacity: 1;
+    };
+}, {
+    readonly name: "wave_small";
+    readonly pattern: {
+        readonly path: {
+            readonly d: "M0 2 C0.7 0.6 1.3 3.4 2 2 S3.3 3.4 4 2";
+            readonly strokeWidth: 1;
+        };
+        readonly width: 4;
+        readonly height: 4;
+        readonly opacity: 1;
+    };
+}, {
+    readonly name: "circle_small";
+    readonly pattern: {
+        readonly path: {
+            readonly d: "M3 2a1 1 0 1 1-2 0a1 1 0 1 1 2 0Z";
+            readonly strokeWidth: 0.75;
+        };
+        readonly width: 4;
+        readonly height: 4;
+        readonly opacity: 1;
+    };
+}, {
+    readonly name: "waffle_small";
+    readonly pattern: {
+        readonly path: {
+            readonly d: "M0 0H3 M0 0V3";
+            readonly strokeWidth: 1;
+        };
+        readonly width: 4;
+        readonly height: 4;
+        readonly opacity: 1;
+    };
+}, {
+    readonly name: "flag_small";
+    readonly pattern: {
+        readonly path: {
+            readonly d: "M1.5 0H3V1.5H3Z";
+            readonly strokeWidth: 1;
+        };
+        readonly width: 6;
+        readonly height: 6;
+        readonly opacity: 1;
+    };
+}, {
+    readonly name: "dot_small";
+    readonly pattern: {
+        readonly path: {
+            readonly d: "M1 1 m -1 0 a 1 1 0 1 0 2 0 a 1 1 0 1 0 -2 0";
+        };
+        readonly width: 6;
+        readonly height: 6;
+        readonly opacity: 1;
+    };
+}, {
+    readonly name: "pyramid_small";
+    readonly pattern: {
+        readonly path: {
+            readonly d: "M4 5 L7 8 L4 11 L1 8 Z";
+        };
+        readonly width: 8;
+        readonly height: 8;
+        readonly opacity: 1;
+    };
+}, {
+    readonly name: "needle_small";
+    readonly pattern: {
+        readonly path: {
+            readonly d: "M0 0 L4 2 L2 4 L0 Z";
+        };
+        readonly width: 5;
+        readonly height: 5;
+        readonly opacity: 1;
+    };
+}, {
+    readonly name: "diamond_small";
+    readonly pattern: {
+        readonly path: {
+            readonly d: "M4 1.75 L6.25 4 L4 6.25 L1.75 4 Z";
+        };
+        readonly width: 8;
+        readonly height: 8;
+        readonly opacity: 1;
+    };
+}, {
+    readonly name: "pizza_small";
+    readonly pattern: {
+        readonly path: {
+            readonly d: "M6 6 m -3 0 a 3 3 0 1 0 6 0 a 3 3 0 1 0 -6 0";
+        };
+        readonly width: 6;
+        readonly height: 6;
+        readonly opacity: 1;
+    };
+}, {
+    readonly name: "diagonal_grid_large";
+    readonly pattern: {
+        readonly path: {
+            readonly d: "M6 0L12 6L6 12L0 6Z";
+            readonly strokeWidth: 1;
+        };
+        readonly width: 12;
+        readonly height: 12;
+        readonly opacity: 1;
+    };
+}, {
+    readonly name: "vertical_lines_large";
+    readonly pattern: {
+        readonly path: {
+            readonly d: "M0 0H1V8H0Z";
+            readonly strokeWidth: 1;
+        };
+        readonly width: 8;
+        readonly height: 8;
+        readonly opacity: 1;
+    };
+}, {
+    readonly name: "grid_large";
+    readonly pattern: {
+        readonly path: {
+            readonly d: "M0 0H8V8H0Z";
+            readonly strokeWidth: 1;
+        };
+        readonly width: 8;
+        readonly height: 8;
+        readonly opacity: 1;
+    };
+}, {
+    readonly name: "horizontal_lines_large";
+    readonly pattern: {
+        readonly path: {
+            readonly d: "M0 0H8V1H0Z";
+            readonly strokeWidth: 2;
+        };
+        readonly width: 8;
+        readonly height: 8;
+        readonly opacity: 1;
+    };
+}, {
+    readonly name: "wave_large";
+    readonly pattern: {
+        readonly path: {
+            readonly d: "M0 4 C2 2 2 7 4 4 S6 7 8 4";
+            readonly strokeWidth: 1;
+        };
+        readonly width: 8;
+        readonly height: 8;
+        readonly opacity: 1;
+    };
+}, {
+    readonly name: "circle_large";
+    readonly pattern: {
+        readonly path: {
+            readonly d: "M6 4a2 2 0 1 1-4 0a2 2 0 1 1 4 0Z";
+            readonly strokeWidth: 1;
+        };
+        readonly width: 8;
+        readonly height: 8;
+        readonly opacity: 1;
+    };
+}, {
+    readonly name: "waffle_large";
+    readonly pattern: {
+        readonly path: {
+            readonly d: "M0 0H6 M0 0V6";
+            readonly strokeWidth: 2;
+        };
+        readonly width: 8;
+        readonly height: 8;
+        readonly opacity: 1;
+    };
+}, {
+    readonly name: "flag_large";
+    readonly pattern: {
+        readonly path: {
+            readonly d: "M2 0H4V2H4Z";
+            readonly strokeWidth: 2;
+        };
+        readonly width: 8;
+        readonly height: 8;
+        readonly opacity: 1;
+    };
+}, {
+    readonly name: "dot_large";
+    readonly pattern: {
+        readonly path: {
+            readonly d: "M4 4 m -1.75 0 a 1.75 1.75 0 1 0 3.5 0 a 1.75 1.75 0 1 0 -3.5 0";
+        };
+        readonly width: 8;
+        readonly height: 8;
+        readonly opacity: 1;
+    };
+}, {
+    readonly name: "pyramid_large";
+    readonly pattern: {
+        readonly path: {
+            readonly d: "M5 6 L9 10 L5 14 L1 10 Z";
+        };
+        readonly width: 10;
+        readonly height: 10;
+        readonly opacity: 1;
+    };
+}, {
+    readonly name: "needle_large";
+    readonly pattern: {
+        readonly path: {
+            readonly d: "M0 0 L6 3 L3 6 L0 Z";
+        };
+        readonly width: 8;
+        readonly height: 8;
+        readonly opacity: 1;
+    };
+}, {
+    readonly name: "diamond_large";
+    readonly pattern: {
+        readonly path: {
+            readonly d: "M4 1 L7 4 L4 7 L1 4 Z";
+        };
+        readonly width: 8;
+        readonly height: 8;
+        readonly opacity: 1;
+    };
+}, {
+    readonly name: "pizza_large";
+    readonly pattern: {
+        readonly path: {
+            readonly d: "M8 8 m -4 0 a 4 4 0 1 0 8 0 a 4 4 0 1 0 -8 0";
+        };
+        readonly width: 8;
+        readonly height: 8;
+        readonly opacity: 1;
+    };
+}];
+
+/**
+ * @internal
+ */
+export declare function PatternFill({ patternFill }: IPatternFillProps): React_2.JSX.Element;
+
+/**
+ * @internal
+ */
+export declare type PatternFillName = (typeof PATTERN_FILLS)[number]["name"];
+
 /**
  * @internal
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-vis-commons",
-  "version": "10.41.0-alpha.5",
+  "version": "10.42.0-alpha.1",
   "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.41.0-alpha.5",
-    "@gooddata/sdk-ui": "10.41.0-alpha.5",
-    "@gooddata/sdk-ui-kit": "10.41.0-alpha.5",
-    "@gooddata/sdk-ui-theme-provider": "10.41.0-alpha.5",
-    "@gooddata/sdk-model": "10.41.0-alpha.5"
+    "@gooddata/sdk-ui": "10.42.0-alpha.1",
+    "@gooddata/sdk-backend-spi": "10.42.0-alpha.1",
+    "@gooddata/sdk-model": "10.42.0-alpha.1",
+    "@gooddata/sdk-ui-kit": "10.42.0-alpha.1",
+    "@gooddata/sdk-ui-theme-provider": "10.42.0-alpha.1"
   },
   "devDependencies": {
     "@gooddata/eslint-config": "^4.1.1",
@@ -83,8 +83,8 @@
     "typescript": "5.8.3",
     "vitest": "3.2.4",
     "vitest-dom": "0.1.1",
-    "@gooddata/reference-workspace": "10.41.0-alpha.5",
-    "@gooddata/sdk-backend-mockingbird": "10.41.0-alpha.5"
+    "@gooddata/reference-workspace": "10.42.0-alpha.1",
+    "@gooddata/sdk-backend-mockingbird": "10.42.0-alpha.1"
   },
   "peerDependencies": {
     "react": "^16.10.0 || ^17.0.0 || ^18.0.0",

package/styles/scss/legend.scss

@@ -76,6 +76,7 @@ $legend-content-background: var(--gd-chart-backgroundColor, var(--gd-palette-com
             height: 9px;
             margin-right: 5px;
             forced-color-adjust: none;
+            box-sizing: border-box;
         }
 
         .series-name,