@refinitiv-ui/elements 6.15.5 → 6.16.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.16.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.15.5...@refinitiv-ui/elements@6.16.0) (2024-02-27)
+
+### Features
+
+- **heatmap:** add new config in Heatmap to customise maximum font size in the cells ([bb0b767](https://github.com/Refinitiv/refinitiv-ui/commit/bb0b7674f479b62c5699b2027086df9704eafcd9))
+
 ## [6.15.5](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.15.4...@refinitiv-ui/elements@6.15.5) (2024-02-19)
 
 **Note:** Version bump only for package @refinitiv-ui/elements

package/lib/heatmap/custom-elements.json

@@ -12,7 +12,7 @@
         },
         {
           "name": "label-width",
-          "description": "Number of maximum label width that cell can paint in pixel.\ne.g. label-width: 30px; cell label hides when text length reaches 30px.",
+          "description": "Set minimum text length to be shown on cells. Unit in pixel.\ne.g. label-width = 30; cell's label is hidden when text length is less than 30px.",
           "type": "number",
           "default": "0"
         },
@@ -57,6 +57,12 @@
           "description": "Cell minimum color saturation, value can be from 0 - 1",
           "type": "number",
           "default": "0.4"
+        },
+        {
+          "name": "label-max-font-size",
+          "description": "Maximum font size of label in cells, value in pixel unit e.g. 18",
+          "type": "number",
+          "default": "16"
         }
       ],
       "properties": [
@@ -69,7 +75,7 @@
         {
           "name": "labelWidth",
           "attribute": "label-width",
-          "description": "Number of maximum label width that cell can paint in pixel.\ne.g. label-width: 30px; cell label hides when text length reaches 30px.",
+          "description": "Set minimum text length to be shown on cells. Unit in pixel.\ne.g. label-width = 30; cell's label is hidden when text length is less than 30px.",
           "type": "number",
           "default": "0"
         },
@@ -122,6 +128,13 @@
           "type": "number",
           "default": "0.4"
         },
+        {
+          "name": "labelMaxFontSize",
+          "attribute": "label-max-font-size",
+          "description": "Maximum font size of label in cells, value in pixel unit e.g. 18",
+          "type": "number",
+          "default": "16"
+        },
         {
           "name": "tooltipCallback",
           "description": "A callback function that allows tooltip rendering on cell hover",

package/lib/heatmap/custom-elements.md

@@ -5,19 +5,20 @@ values contained in a matrix are represented as colors
 
 ## Properties
 
-| Property          | Attribute      | Type                     | Default | Description                                      |
-|-------------------|----------------|--------------------------|---------|--------------------------------------------------|
-| `axisHidden`      | `axis-hidden`  | `boolean`                | false   | Hide all axes                                    |
-| `blend`           | `blend`        | `boolean`                | false   | Enable cell color blending                       |
-| `config`          | `config`       | `HeatmapConfig`          | null    | Heatmap configuration options.                   |
-| `labelHidden`     | `label-hidden` | `boolean`                | false   | Hide all labels in the cells                     |
-| `labelWidth`      | `label-width`  | `number`                 | 0       | Number of maximum label width that cell can paint in pixel.<br />e.g. label-width: 30px; cell label hides when text length reaches 30px. |
-| `maxPoint`        | `max-point`    | `number`                 | 1       | Maximum point of the cell coloring               |
-| `midPoint`        | `mid-point`    | `number`                 | 0       | Middle point of the cell coloring                |
-| `minPoint`        | `min-point`    | `number`                 | -1      | Minimum point of the cell coloring               |
-| `renderCallback`  |                | `HeatmapRenderCallback`  |         | Render callback function use for custom cell properties.<br />Accepts custom label, foreground and background color |
-| `saturation`      | `saturation`   | `number`                 | 0.4     | Cell minimum color saturation, value can be from 0 - 1 |
-| `tooltipCallback` |                | `HeatmapTooltipCallback` |         | A callback function that allows tooltip rendering on cell hover |
+| Property           | Attribute             | Type                     | Default | Description                                      |
+|--------------------|-----------------------|--------------------------|---------|--------------------------------------------------|
+| `axisHidden`       | `axis-hidden`         | `boolean`                | false   | Hide all axes                                    |
+| `blend`            | `blend`               | `boolean`                | false   | Enable cell color blending                       |
+| `config`           | `config`              | `HeatmapConfig`          | null    | Heatmap configuration options.                   |
+| `labelHidden`      | `label-hidden`        | `boolean`                | false   | Hide all labels in the cells                     |
+| `labelMaxFontSize` | `label-max-font-size` | `number`                 | 16      | Maximum font size of label in cells, value in pixel unit e.g. 18 |
+| `labelWidth`       | `label-width`         | `number`                 | 0       | Set minimum text length to be shown on cells. Unit in pixel.<br />e.g. label-width = 30; cell's label is hidden when text length is less than 30px. |
+| `maxPoint`         | `max-point`           | `number`                 | 1       | Maximum point of the cell coloring               |
+| `midPoint`         | `mid-point`           | `number`                 | 0       | Middle point of the cell coloring                |
+| `minPoint`         | `min-point`           | `number`                 | -1      | Minimum point of the cell coloring               |
+| `renderCallback`   |                       | `HeatmapRenderCallback`  |         | Render callback function use for custom cell properties.<br />Accepts custom label, foreground and background color |
+| `saturation`       | `saturation`          | `number`                 | 0.4     | Cell minimum color saturation, value can be from 0 - 1 |
+| `tooltipCallback`  |                       | `HeatmapTooltipCallback` |         | A callback function that allows tooltip rendering on cell hover |
 
 ## Methods
 

package/lib/heatmap/helpers/text.d.ts

@@ -1,14 +1,14 @@
 import type { HeatmapCell } from './types';
 declare const MIN_FONT_SIZE = 12;
-declare const MAX_FONT_SIZE = 16;
 /**
  * Calculate responsive font size according to the screen width
  * @param ratio font ratio
  * @param cellHeight cell's height
  * @param cellWidth cell's width
+ * @param cellMaxFontSize cell's max font size
  * @returns font size
  */
-declare const getResponsiveFontSize: (ratio: number, cellHeight: number, cellWidth: number) => number;
+declare const getResponsiveFontSize: (ratio: number, cellHeight: number, cellWidth: number, cellMaxFontSize: number) => number;
 /**
  * Get maximum text width out of all the cell by sampling
  * @param ctx canvas context
@@ -17,4 +17,4 @@ declare const getResponsiveFontSize: (ratio: number, cellHeight: number, cellWid
  * @returns label width measured in canvas
  */
 declare const getMaximumTextWidth: (ctx: CanvasRenderingContext2D, cells: HeatmapCell[], hasCellHeader: boolean) => number;
-export { getResponsiveFontSize, getMaximumTextWidth, MIN_FONT_SIZE, MAX_FONT_SIZE };
+export { getResponsiveFontSize, getMaximumTextWidth, MIN_FONT_SIZE };

package/lib/heatmap/helpers/text.js

@@ -1,19 +1,19 @@
 const MIN_FONT_SIZE = 12;
-const MAX_FONT_SIZE = 16;
 /**
  * Calculate responsive font size according to the screen width
  * @param ratio font ratio
  * @param cellHeight cell's height
  * @param cellWidth cell's width
+ * @param cellMaxFontSize cell's max font size
  * @returns font size
  */
-const getResponsiveFontSize = (ratio, cellHeight, cellWidth) => {
+const getResponsiveFontSize = (ratio, cellHeight, cellWidth, cellMaxFontSize) => {
     let fontSize = Math.round(Math.min(cellHeight, cellWidth) * ratio);
     if (fontSize < MIN_FONT_SIZE) {
         fontSize = MIN_FONT_SIZE;
     }
-    else if (fontSize > MAX_FONT_SIZE) {
-        fontSize = MAX_FONT_SIZE;
+    else if (fontSize > cellMaxFontSize) {
+        fontSize = cellMaxFontSize;
     }
     return fontSize;
 };
@@ -71,4 +71,4 @@ const getMaximumTextWidth = (ctx, cells, hasCellHeader) => {
     }
     return maxTextWidth;
 };
-export { getResponsiveFontSize, getMaximumTextWidth, MIN_FONT_SIZE, MAX_FONT_SIZE };
+export { getResponsiveFontSize, getMaximumTextWidth, MIN_FONT_SIZE };

package/lib/heatmap/index.d.ts

@@ -27,8 +27,8 @@ export declare class Heatmap extends ResponsiveElement {
      */
     config: HeatmapConfig | null;
     /**
-     * Number of maximum label width that cell can paint in pixel.
-     * e.g. label-width: 30px; cell label hides when text length reaches 30px.
+     * Set minimum text length to be shown on cells. Unit in pixel.
+     * e.g. label-width = 30; cell's label is hidden when text length is less than 30px.
      */
     labelWidth: number;
     /**
@@ -65,6 +65,10 @@ export declare class Heatmap extends ResponsiveElement {
      * Cell minimum color saturation, value can be from 0 - 1
      */
     saturation: number;
+    /**
+     * Maximum font size of label in cells, value in pixel unit e.g. 18
+     */
+    labelMaxFontSize: number;
     /**
      * Returns data of interactive cell
      * @param {MouseEvent} event A MouseEvent that occurs when Heatmap is being interacted
@@ -330,9 +334,9 @@ export declare class Heatmap extends ResponsiveElement {
      */
     private paintAllLabel;
     /**
-     * Calculates space between header and label using cell's height
-     * Maximum 10 pixels
+     * Calculates space between header and label
      * @param cellHeight in pixels
+     * @param cellWidth in pixels
      * @returns in pixels
      */
     private calculateHeaderMargin;

package/lib/heatmap/index.js

@@ -149,8 +149,8 @@ let Heatmap = class Heatmap extends ResponsiveElement {
          */
         this.config = null;
         /**
-         * Number of maximum label width that cell can paint in pixel.
-         * e.g. label-width: 30px; cell label hides when text length reaches 30px.
+         * Set minimum text length to be shown on cells. Unit in pixel.
+         * e.g. label-width = 30; cell's label is hidden when text length is less than 30px.
          */
         this.labelWidth = 0;
         /**
@@ -181,6 +181,10 @@ let Heatmap = class Heatmap extends ResponsiveElement {
          * Cell minimum color saturation, value can be from 0 - 1
          */
         this.saturation = 0.4;
+        /**
+         * Maximum font size of label in cells, value in pixel unit e.g. 18
+         */
+        this.labelMaxFontSize = 16;
         /**
          * Current active cell
          */
@@ -630,14 +634,16 @@ let Heatmap = class Heatmap extends ResponsiveElement {
         }
     }
     /**
-     * Calculates space between header and label using cell's height
-     * Maximum 10 pixels
+     * Calculates space between header and label
      * @param cellHeight in pixels
+     * @param cellWidth in pixels
      * @returns in pixels
      */
-    calculateHeaderMargin(cellHeight) {
-        const margin = (cellHeight / 10) * 2;
-        return margin > 10 ? 10 : margin;
+    calculateHeaderMargin(cellHeight, cellWidth) {
+        const margin = 18; // maximum margin
+        const maxValue = Math.max(cellHeight, cellWidth);
+        const minValue = Math.min(cellHeight, cellWidth);
+        return margin / (maxValue / minValue);
     }
     /**
      * Paints label to a single cell
@@ -653,7 +659,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
             cell.foregroundColor === undefined) {
             return;
         }
-        const margin = cell.header ? this.calculateHeaderMargin(cell.height) : 0;
+        const margin = cell.header ? this.calculateHeaderMargin(cell.height, cell.width) : 0;
         const label = typeof cell.customLabel === 'string' ? cell.customLabel : cell.label;
         this.canvasContext.fillStyle = cell.customForegroundColor || cell.foregroundColor;
         this.canvasContext.fillText(label || '', cell.x + cell.width / 2, cell.y + 1 + cell.height / 2 + margin);
@@ -676,7 +682,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
             this.contentWithinCellBoundary = false;
             return this.contentWithinCellBoundary;
         }
-        let fontSize = getResponsiveFontSize(fontRatio, contentHeight, contentWidth);
+        let fontSize = getResponsiveFontSize(fontRatio, contentHeight, contentWidth, this.labelMaxFontSize);
         canvas.textAlign = 'center';
         canvas.textBaseline = 'middle';
         canvas.font = `${fontSize}px ${fontFamily}`;
@@ -812,7 +818,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
             return;
         }
         const labelFontStyle = this.canvasContext.font;
-        const margin = this.labelHidden ? 0 : this.calculateHeaderMargin(cell.height);
+        const margin = this.labelHidden ? 0 : this.calculateHeaderMargin(cell.height, cell.width);
         this.canvasContext.font = 'bold ' + labelFontStyle;
         this.canvasContext.fillStyle = cell.customForegroundColor || cell.foregroundColor;
         this.canvasContext.fillText(cell.header || '', cell.x + cell.width / 2, cell.y + 1 + cell.height / 2 - margin);
@@ -1098,6 +1104,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], Heatmap.prototype, "saturation", void 0);
+__decorate([
+    property({ type: Number, attribute: 'label-max-font-size' })
+], Heatmap.prototype, "labelMaxFontSize", void 0);
 __decorate([
     property({ attribute: false })
 ], Heatmap.prototype, "tooltipCallback", void 0);

package/lib/version.js

@@ -1 +1 @@
-export const VERSION = '6.15.5';
+export const VERSION = '6.16.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinitiv-ui/elements",
-  "version": "6.15.5",
+  "version": "6.16.0",
   "description": "Element Framework Elements",
   "author": "LSEG",
   "license": "Apache-2.0",
@@ -370,5 +370,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "44fc7481eb1a179cca96795cdd46018e45448c9c"
+  "gitHead": "296f3d3f500bb1d65efa1f7dc689324a50b44201"
 }