@refinitiv-ui/elements 7.10.5 → 7.10.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/lib/heatmap/custom-elements.json +15 -2
  3. package/lib/heatmap/custom-elements.md +14 -13
  4. package/lib/heatmap/helpers/text.d.ts +3 -3
  5. package/lib/heatmap/helpers/text.js +5 -5
  6. package/lib/heatmap/index.d.ts +8 -4
  7. package/lib/heatmap/index.js +19 -10
  8. package/lib/version.js +1 -1
  9. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,10 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [7.10.6](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.10.5...@refinitiv-ui/elements@7.10.6) (2024-02-27)
7
+
8
+ **Note:** Version bump only for package @refinitiv-ui/elements
9
+
6
10
  ## [7.10.5](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.10.4...@refinitiv-ui/elements@7.10.5) (2024-02-19)
7
11
 
8
12
  **Note:** Version bump only for package @refinitiv-ui/elements
package/lib/heatmap/custom-elements.json CHANGED
@@ -12,7 +12,7 @@
12
12
  },
13
13
  {
14
14
  "name": "label-width",
15
- "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.",
15
+ "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.",
16
16
  "type": "number",
17
17
  "default": "0"
18
18
  },
@@ -57,6 +57,12 @@
57
57
  "description": "Cell minimum color saturation, value can be from 0 - 1",
58
58
  "type": "number",
59
59
  "default": "0.4"
60
+ },
61
+ {
62
+ "name": "label-max-font-size",
63
+ "description": "Maximum font size of label in cells, value in pixel unit e.g. 18",
64
+ "type": "number",
65
+ "default": "16"
60
66
  }
61
67
  ],
62
68
  "properties": [
@@ -69,7 +75,7 @@
69
75
  {
70
76
  "name": "labelWidth",
71
77
  "attribute": "label-width",
72
- "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.",
78
+ "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.",
73
79
  "type": "number",
74
80
  "default": "0"
75
81
  },
@@ -122,6 +128,13 @@
122
128
  "type": "number",
123
129
  "default": "0.4"
124
130
  },
131
+ {
132
+ "name": "labelMaxFontSize",
133
+ "attribute": "label-max-font-size",
134
+ "description": "Maximum font size of label in cells, value in pixel unit e.g. 18",
135
+ "type": "number",
136
+ "default": "16"
137
+ },
125
138
  {
126
139
  "name": "tooltipCallback",
127
140
  "description": "A callback function that allows tooltip rendering on cell hover",
package/lib/heatmap/custom-elements.md CHANGED
@@ -5,19 +5,20 @@ values contained in a matrix are represented as colors
5
5
 
6
6
  ## Properties
7
7
 
8
- | Property | Attribute | Type | Default | Description |
9
- |-------------------|----------------|--------------------------|---------|--------------------------------------------------|
10
- | `axisHidden` | `axis-hidden` | `boolean` | false | Hide all axes |
11
- | `blend` | `blend` | `boolean` | false | Enable cell color blending |
12
- | `config` | `config` | `HeatmapConfig` | null | Heatmap configuration options. |
13
- | `labelHidden` | `label-hidden` | `boolean` | false | Hide all labels in the cells |
14
- | `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. |
15
- | `maxPoint` | `max-point` | `number` | 1 | Maximum point of the cell coloring |
16
- | `midPoint` | `mid-point` | `number` | 0 | Middle point of the cell coloring |
17
- | `minPoint` | `min-point` | `number` | -1 | Minimum point of the cell coloring |
18
- | `renderCallback` | | `HeatmapRenderCallback` | | Render callback function use for custom cell properties.<br />Accepts custom label, foreground and background color |
19
- | `saturation` | `saturation` | `number` | 0.4 | Cell minimum color saturation, value can be from 0 - 1 |
20
- | `tooltipCallback` | | `HeatmapTooltipCallback` | | A callback function that allows tooltip rendering on cell hover |
8
+ | Property | Attribute | Type | Default | Description |
9
+ |--------------------|-----------------------|--------------------------|---------|--------------------------------------------------|
10
+ | `axisHidden` | `axis-hidden` | `boolean` | false | Hide all axes |
11
+ | `blend` | `blend` | `boolean` | false | Enable cell color blending |
12
+ | `config` | `config` | `HeatmapConfig` | null | Heatmap configuration options. |
13
+ | `labelHidden` | `label-hidden` | `boolean` | false | Hide all labels in the cells |
14
+ | `labelMaxFontSize` | `label-max-font-size` | `number` | 16 | Maximum font size of label in cells, value in pixel unit e.g. 18 |
15
+ | `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. |
16
+ | `maxPoint` | `max-point` | `number` | 1 | Maximum point of the cell coloring |
17
+ | `midPoint` | `mid-point` | `number` | 0 | Middle point of the cell coloring |
18
+ | `minPoint` | `min-point` | `number` | -1 | Minimum point of the cell coloring |
19
+ | `renderCallback` | | `HeatmapRenderCallback` | | Render callback function use for custom cell properties.<br />Accepts custom label, foreground and background color |
20
+ | `saturation` | `saturation` | `number` | 0.4 | Cell minimum color saturation, value can be from 0 - 1 |
21
+ | `tooltipCallback` | | `HeatmapTooltipCallback` | | A callback function that allows tooltip rendering on cell hover |
21
22
 
22
23
  ## Methods
23
24
 
package/lib/heatmap/helpers/text.d.ts CHANGED
@@ -1,14 +1,14 @@
1
1
  import type { HeatmapCell } from './types';
2
2
  declare const MIN_FONT_SIZE = 12;
3
- declare const MAX_FONT_SIZE = 16;
4
3
  /**
5
4
  * Calculate responsive font size according to the screen width
6
5
  * @param ratio font ratio
7
6
  * @param cellHeight cell's height
8
7
  * @param cellWidth cell's width
8
+ * @param cellMaxFontSize cell's max font size
9
9
  * @returns font size
10
10
  */
11
- declare const getResponsiveFontSize: (ratio: number, cellHeight: number, cellWidth: number) => number;
11
+ declare const getResponsiveFontSize: (ratio: number, cellHeight: number, cellWidth: number, cellMaxFontSize: number) => number;
12
12
  /**
13
13
  * Get maximum text width out of all the cell by sampling
14
14
  * @param ctx canvas context
@@ -17,4 +17,4 @@ declare const getResponsiveFontSize: (ratio: number, cellHeight: number, cellWid
17
17
  * @returns label width measured in canvas
18
18
  */
19
19
  declare const getMaximumTextWidth: (ctx: CanvasRenderingContext2D, cells: HeatmapCell[], hasCellHeader: boolean) => number;
20
- export { getResponsiveFontSize, getMaximumTextWidth, MIN_FONT_SIZE, MAX_FONT_SIZE };
20
+ export { getResponsiveFontSize, getMaximumTextWidth, MIN_FONT_SIZE };
package/lib/heatmap/helpers/text.js CHANGED
@@ -1,19 +1,19 @@
1
1
  const MIN_FONT_SIZE = 12;
2
- const MAX_FONT_SIZE = 16;
3
2
  /**
4
3
  * Calculate responsive font size according to the screen width
5
4
  * @param ratio font ratio
6
5
  * @param cellHeight cell's height
7
6
  * @param cellWidth cell's width
7
+ * @param cellMaxFontSize cell's max font size
8
8
  * @returns font size
9
9
  */
10
- const getResponsiveFontSize = (ratio, cellHeight, cellWidth) => {
10
+ const getResponsiveFontSize = (ratio, cellHeight, cellWidth, cellMaxFontSize) => {
11
11
  let fontSize = Math.round(Math.min(cellHeight, cellWidth) * ratio);
12
12
  if (fontSize < MIN_FONT_SIZE) {
13
13
  fontSize = MIN_FONT_SIZE;
14
14
  }
15
- else if (fontSize > MAX_FONT_SIZE) {
16
- fontSize = MAX_FONT_SIZE;
15
+ else if (fontSize > cellMaxFontSize) {
16
+ fontSize = cellMaxFontSize;
17
17
  }
18
18
  return fontSize;
19
19
  };
@@ -71,4 +71,4 @@ const getMaximumTextWidth = (ctx, cells, hasCellHeader) => {
71
71
  }
72
72
  return maxTextWidth;
73
73
  };
74
- export { getResponsiveFontSize, getMaximumTextWidth, MIN_FONT_SIZE, MAX_FONT_SIZE };
74
+ export { getResponsiveFontSize, getMaximumTextWidth, MIN_FONT_SIZE };
package/lib/heatmap/index.d.ts CHANGED
@@ -27,8 +27,8 @@ export declare class Heatmap extends ResponsiveElement {
27
27
  */
28
28
  config: HeatmapConfig | null;
29
29
  /**
30
- * Number of maximum label width that cell can paint in pixel.
31
- * e.g. label-width: 30px; cell label hides when text length reaches 30px.
30
+ * Set minimum text length to be shown on cells. Unit in pixel.
31
+ * e.g. label-width = 30; cell's label is hidden when text length is less than 30px.
32
32
  */
33
33
  labelWidth: number;
34
34
  /**
@@ -65,6 +65,10 @@ export declare class Heatmap extends ResponsiveElement {
65
65
  * Cell minimum color saturation, value can be from 0 - 1
66
66
  */
67
67
  saturation: number;
68
+ /**
69
+ * Maximum font size of label in cells, value in pixel unit e.g. 18
70
+ */
71
+ labelMaxFontSize: number;
68
72
  /**
69
73
  * Returns data of interactive cell
70
74
  * @param {MouseEvent} event A MouseEvent that occurs when Heatmap is being interacted
@@ -330,9 +334,9 @@ export declare class Heatmap extends ResponsiveElement {
330
334
  */
331
335
  private paintAllLabel;
332
336
  /**
333
- * Calculates space between header and label using cell's height
334
- * Maximum 10 pixels
337
+ * Calculates space between header and label
335
338
  * @param cellHeight in pixels
339
+ * @param cellWidth in pixels
336
340
  * @returns in pixels
337
341
  */
338
342
  private calculateHeaderMargin;
package/lib/heatmap/index.js CHANGED
@@ -148,8 +148,8 @@ let Heatmap = class Heatmap extends ResponsiveElement {
148
148
  */
149
149
  this.config = null;
150
150
  /**
151
- * Number of maximum label width that cell can paint in pixel.
152
- * e.g. label-width: 30px; cell label hides when text length reaches 30px.
151
+ * Set minimum text length to be shown on cells. Unit in pixel.
152
+ * e.g. label-width = 30; cell's label is hidden when text length is less than 30px.
153
153
  */
154
154
  this.labelWidth = 0;
155
155
  /**
@@ -181,6 +181,10 @@ let Heatmap = class Heatmap extends ResponsiveElement {
181
181
  * Cell minimum color saturation, value can be from 0 - 1
182
182
  */
183
183
  this.saturation = 0.4;
184
+ /**
185
+ * Maximum font size of label in cells, value in pixel unit e.g. 18
186
+ */
187
+ this.labelMaxFontSize = 16;
184
188
  /**
185
189
  * Current active cell
186
190
  */
@@ -638,14 +642,16 @@ let Heatmap = class Heatmap extends ResponsiveElement {
638
642
  }
639
643
  }
640
644
  /**
641
- * Calculates space between header and label using cell's height
642
- * Maximum 10 pixels
645
+ * Calculates space between header and label
643
646
  * @param cellHeight in pixels
647
+ * @param cellWidth in pixels
644
648
  * @returns in pixels
645
649
  */
646
- calculateHeaderMargin(cellHeight) {
647
- const margin = (cellHeight / 10) * 2;
648
- return margin > 10 ? 10 : margin;
650
+ calculateHeaderMargin(cellHeight, cellWidth) {
651
+ const margin = 18; // maximum margin
652
+ const maxValue = Math.max(cellHeight, cellWidth);
653
+ const minValue = Math.min(cellHeight, cellWidth);
654
+ return margin / (maxValue / minValue);
649
655
  }
650
656
  /**
651
657
  * Paints label to a single cell
@@ -661,7 +667,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
661
667
  cell.foregroundColor === undefined) {
662
668
  return;
663
669
  }
664
- const margin = cell.header ? this.calculateHeaderMargin(cell.height) : 0;
670
+ const margin = cell.header ? this.calculateHeaderMargin(cell.height, cell.width) : 0;
665
671
  const label = typeof cell.customLabel === 'string' ? cell.customLabel : cell.label;
666
672
  this.canvasContext.fillStyle = cell.customForegroundColor || cell.foregroundColor;
667
673
  this.canvasContext.fillText(label || '', cell.x + cell.width / 2, cell.y + 1 + cell.height / 2 + margin);
@@ -684,7 +690,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
684
690
  this.contentWithinCellBoundary = false;
685
691
  return this.contentWithinCellBoundary;
686
692
  }
687
- let fontSize = getResponsiveFontSize(fontRatio, contentHeight, contentWidth);
693
+ let fontSize = getResponsiveFontSize(fontRatio, contentHeight, contentWidth, this.labelMaxFontSize);
688
694
  canvas.textAlign = 'center';
689
695
  canvas.textBaseline = 'middle';
690
696
  canvas.font = `${fontSize}px ${fontFamily}`;
@@ -823,7 +829,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
823
829
  return;
824
830
  }
825
831
  const labelFontStyle = this.canvasContext.font;
826
- const margin = this.labelHidden ? 0 : this.calculateHeaderMargin(cell.height);
832
+ const margin = this.labelHidden ? 0 : this.calculateHeaderMargin(cell.height, cell.width);
827
833
  this.canvasContext.font = 'bold ' + labelFontStyle;
828
834
  this.canvasContext.fillStyle = cell.customForegroundColor || cell.foregroundColor;
829
835
  this.canvasContext.fillText(cell.header || '', cell.x + cell.width / 2, cell.y + 1 + cell.height / 2 - margin);
@@ -1112,6 +1118,9 @@ __decorate([
1112
1118
  __decorate([
1113
1119
  property({ type: Number })
1114
1120
  ], Heatmap.prototype, "saturation", void 0);
1121
+ __decorate([
1122
+ property({ type: Number, attribute: 'label-max-font-size' })
1123
+ ], Heatmap.prototype, "labelMaxFontSize", void 0);
1115
1124
  __decorate([
1116
1125
  property({ attribute: false })
1117
1126
  ], Heatmap.prototype, "tooltipCallback", void 0);
package/lib/version.js CHANGED
@@ -1 +1 @@
1
- export const VERSION = '7.10.5';
1
+ export const VERSION = '7.10.6';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@refinitiv-ui/elements",
3
- "version": "7.10.5",
3
+ "version": "7.10.6",
4
4
  "description": "Element Framework Elements",
5
5
  "author": "LSEG",
6
6
  "license": "Apache-2.0",
@@ -373,5 +373,5 @@
373
373
  "publishConfig": {
374
374
  "access": "public"
375
375
  },
376
- "gitHead": "6820b961ecc0ad1517ef94807df775eceb4f91db"
376
+ "gitHead": "117edaaf144ec73b9e45ab5b03c90d67100d13b2"
377
377
  }