@refinitiv-ui/elements 7.1.0 → 7.2.1

package/CHANGELOG.md

@@ -3,6 +3,27 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.2.1](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.2.0...@refinitiv-ui/elements@7.2.1) (2023-08-07)
+
+### Bug Fixes
+
+- **chart:** use single color on bar and bubble chart ([#882](https://github.com/Refinitiv/refinitiv-ui/issues/882)) ([3adb28d](https://github.com/Refinitiv/refinitiv-ui/commit/3adb28def9dd2e5a2e9ab8be5c36f9384251dc45))
+- **interactive-chart:** replace priceScale config with left and right priceScale due to api changed ([#875](https://github.com/Refinitiv/refinitiv-ui/issues/875)) ([a3310c1](https://github.com/Refinitiv/refinitiv-ui/commit/a3310c14a2f84f51b655ea3591f24084fca6e849))
+- **interactive-chart:** wrong legend color on candlestick chart ([#874](https://github.com/Refinitiv/refinitiv-ui/issues/874)) ([710f8e9](https://github.com/Refinitiv/refinitiv-ui/commit/710f8e96bc27bc6715c038b20fd25c38f37287ee))
+- **notification:** `info`, `confirm`, `warn`, `error` duration should be optional ([#873](https://github.com/Refinitiv/refinitiv-ui/issues/873)) ([207808c](https://github.com/Refinitiv/refinitiv-ui/commit/207808cd2191bec53cdaa03becf60a1a8e3bfe14))
+
+# [7.2.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.1.0...@refinitiv-ui/elements@7.2.0) (2023-07-31)
+
+### Bug Fixes
+
+- **heatmap:** `HeatmapCell` properties other than `value` should be optional ([#866](https://github.com/Refinitiv/refinitiv-ui/issues/866)) ([c27d3d6](https://github.com/Refinitiv/refinitiv-ui/commit/c27d3d6a004f897a0d8c037899514c9fe154a21c))
+- **number-field:** add aria-valuetext to prevent VO announce % ([e127ccb](https://github.com/Refinitiv/refinitiv-ui/commit/e127ccb403f2dc1795f25a24f41ac293f701647e))
+
+### Features
+
+- **interactive-chart:** change chart instance access modifier to public ([88ed541](https://github.com/Refinitiv/refinitiv-ui/commit/88ed541212f494877678213f9d8a68c0c8fa0b2c))
+- **tooltip:** add data-tooltip alias for tooltip attribute ([#859](https://github.com/Refinitiv/refinitiv-ui/issues/859)) ([3d2a333](https://github.com/Refinitiv/refinitiv-ui/commit/3d2a333f28afacbac353d344beae5fa6c52f61db))
+
 # [7.1.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.0.2...@refinitiv-ui/elements@7.1.0) (2023-07-25)
 
 ### Bug Fixes

package/lib/chart/elements/chart.js

@@ -98,10 +98,9 @@ let Chart = class Chart extends BasicElement {
                             merge(dataset.backgroundColor, backgroundColor);
                         }
                         break;
-                    // These types, Colors could be string or array
                     case 'bar':
                     case 'bubble':
-                        colors = this.generateColors(!isMultipleDatasets, !isMultipleDatasets && dataset.data ? dataset.data.length : 1, datasetIndex);
+                        colors = this.generateColors(false, 1, datasetIndex);
                         borderColor = colors.solid;
                         backgroundColor = this.config?.type === 'bubble' ? colors.opaque : colors.solid;
                         if (!dataset.borderColor) {

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

@@ -1,5 +1,5 @@
 type HeatmapConfig = {
-    data: Array<HeatmapCell[]>;
+    data: HeatmapCell[][];
     yAxis?: HeatmapYAxis;
     xAxis?: HeatmapXAxis;
 };
@@ -13,18 +13,18 @@ type HeatmapYAxis = {
     position: 'left' | 'right';
 };
 type HeatmapCell = {
-    rowIndex: number;
-    colIndex: number;
-    x: number;
-    y: number;
-    width: number;
-    height: number;
+    rowIndex?: number;
+    colIndex?: number;
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
     value: number | null;
     header?: string;
     label?: string;
-    foregroundColor: string;
-    defaultBackground: string;
-    backgroundColor: string;
+    foregroundColor?: string;
+    defaultBackground?: string;
+    backgroundColor?: string;
     animationFrame?: number;
     customLabel?: string;
     customBackgroundColor?: string;

package/lib/heatmap/index.js

@@ -318,15 +318,13 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      */
     onResize() {
         this.updateTimer = 0;
-        if (!this.isSizeCalculated) {
-            if (this.offsetWidth || this.offsetHeight) {
-                this.isSizeCalculated = true;
-            }
-        }
         if (this.isSizeCalculated) {
             const spacing = parseFloat(this.getComputedVariable('--spacing', '0'));
             this.cellMargin = spacing / 2;
         }
+        else {
+            this.isSizeCalculated = Boolean(this.offsetWidth || this.offsetHeight);
+        }
         // calculate responsive height
         if (this.responsiveHeight || !this.offsetHeight) {
             const width = this.offsetWidth;
@@ -397,12 +395,17 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      */
     /* c8 ignore start */
     updateTooltipOverlayPosition(cell) {
+        if (cell.x === undefined ||
+            cell.y === undefined ||
+            cell.width === undefined ||
+            cell.height === undefined) {
+            return;
+        }
         // Compensate x-axis height for overlay when x-axis is at top position
         let marginOverlayTop = 0;
         if (this.config?.xAxis && this.xAxis?.offsetHeight) {
             marginOverlayTop = this.config.xAxis.position === 'bottom' ? 0 : this.xAxis?.offsetHeight;
         }
-        // Update overlay position
         this.tooltipOverlay.style.left = `${cell.x}px`;
         this.tooltipOverlay.style.top = `${cell.y + marginOverlayTop}px`;
         this.tooltipOverlay.style.width = `${cell.width}px`;
@@ -417,7 +420,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      */
     /* c8 ignore start */
     hoverCellChanged(cell, previousCell) {
-        if (cell && cell.value !== null) {
+        if (cell && cell.value !== null && cell.backgroundColor) {
             if (this.tooltipCallback) {
                 this.updateTooltipOverlayPosition(cell);
             }
@@ -427,7 +430,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
             this.fade(cell, cell.backgroundColor, fadedColor, 100);
         }
         // returns color of previous cell to default cell color
-        if (previousCell && previousCell.value !== null) {
+        if (previousCell && previousCell.value !== null && previousCell.backgroundColor) {
             previousCell.foregroundColor = this.foregroundColor;
             this.fade(previousCell, previousCell.backgroundColor, this.getBackgroundColor(previousCell.value), 300);
         }
@@ -487,6 +490,12 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      */
     /* c8 ignore start */
     resetCell(cell) {
+        if (cell.x === undefined ||
+            cell.y === undefined ||
+            cell.width === undefined ||
+            cell.height === undefined) {
+            return;
+        }
         this.canvasContext?.clearRect(cell.x, cell.y, cell.width, cell.height);
     }
     /* c8 ignore stop */
@@ -504,6 +513,9 @@ let Heatmap = class Heatmap extends ResponsiveElement {
         const start = performance.now();
         const end = start + duration;
         const fadingAnimation = (time) => {
+            if (cell.colIndex === undefined || cell.rowIndex === undefined) {
+                return;
+            }
             cell.x = this.colTrack.getContentStart(cell.colIndex);
             cell.y = this.rowTrack.getContentStart(cell.rowIndex);
             cell.width = this.colTrack.getContentSize(cell.colIndex);
@@ -641,12 +653,18 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      * @returns {void}
      */
     paintLabel(cell) {
+        if (!this.canvasContext ||
+            cell.x === undefined ||
+            cell.y === undefined ||
+            cell.width === undefined ||
+            cell.height === undefined ||
+            cell.foregroundColor === undefined) {
+            return;
+        }
         const margin = cell.header ? this.calculateHeaderMargin(cell.height) : 0;
         const label = typeof cell.customLabel === 'string' ? cell.customLabel : cell.label;
-        if (this.canvasContext) {
-            this.canvasContext.fillStyle = cell.customForegroundColor || cell.foregroundColor;
-            this.canvasContext.fillText(label || '', cell.x + cell.width / 2, cell.y + 1 + cell.height / 2 + margin);
-        }
+        this.canvasContext.fillStyle = cell.customForegroundColor || cell.foregroundColor;
+        this.canvasContext.fillText(label || '', cell.x + cell.width / 2, cell.y + 1 + cell.height / 2 + margin);
     }
     /**
      * Check if the text (label / header and label) can be paint on the cell
@@ -796,15 +814,21 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      * @returns {void}
      */
     paintHeader(cell) {
-        if (this.canvasContext) {
-            const labelFontStyle = this.canvasContext.font;
-            const margin = this.labelHidden ? 0 : this.calculateHeaderMargin(cell.height);
-            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);
-            // Reverts font style to paint label correctly
-            this.canvasContext.font = labelFontStyle;
+        if (!this.canvasContext ||
+            cell.x === undefined ||
+            cell.y === undefined ||
+            cell.width === undefined ||
+            cell.height === undefined ||
+            cell.foregroundColor === undefined) {
+            return;
         }
+        const labelFontStyle = this.canvasContext.font;
+        const margin = this.labelHidden ? 0 : this.calculateHeaderMargin(cell.height);
+        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);
+        // Reverts font style to paint label correctly
+        this.canvasContext.font = labelFontStyle;
     }
     /**
      * Paints header to all cells
@@ -847,10 +871,16 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      * @returns {void}
      */
     paintCellBackground(cell) {
-        if (this.canvasContext) {
-            this.canvasContext.fillStyle = cell.customBackgroundColor || cell.backgroundColor;
-            this.canvasContext.fillRect(cell.x, cell.y, cell.width, cell.height);
+        if (!this.canvasContext ||
+            cell.x === undefined ||
+            cell.y === undefined ||
+            cell.width === undefined ||
+            cell.height === undefined ||
+            cell.backgroundColor === undefined) {
+            return;
         }
+        this.canvasContext.fillStyle = cell.customBackgroundColor || cell.backgroundColor;
+        this.canvasContext.fillRect(cell.x, cell.y, cell.width, cell.height);
     }
     /**
      * Construct and renders x-axis
@@ -1011,7 +1041,6 @@ let Heatmap = class Heatmap extends ResponsiveElement {
         if (this.hoverCell && this.canvasContext && this.tooltipCallback) {
             return this.tooltipCallback(this.hoverCell);
         }
-        return undefined;
     }
     /* c8 ignore stop */
     /**
@@ -1084,10 +1113,10 @@ __decorate([
     property({ type: Number })
 ], Heatmap.prototype, "saturation", void 0);
 __decorate([
-    property({ type: Function, attribute: false })
+    property({ attribute: false })
 ], Heatmap.prototype, "tooltipCallback", void 0);
 __decorate([
-    property({ type: Function, attribute: false })
+    property({ attribute: false })
 ], Heatmap.prototype, "renderCallback", void 0);
 __decorate([
     query('[part=canvas]', true)

package/lib/interactive-chart/custom-elements.json

@@ -56,6 +56,11 @@
           "description": "Set legend style i.e. `horizontal`, `vertical`.",
           "type": "\"vertical\" | \"horizontal\"",
           "default": "\"vertical\""
+        },
+        {
+          "name": "chart",
+          "description": "lightweight-charts object",
+          "type": "IChartApi | null"
         }
       ],
       "events": [

package/lib/interactive-chart/custom-elements.md

@@ -7,6 +7,7 @@ By lightweight-charts library.
 
 | Property             | Attribute              | Type                         | Default    | Description                                     |
 |----------------------|------------------------|------------------------------|------------|-------------------------------------------------|
+| `chart`              |                        | `IChartApi \| null`          | null       | lightweight-charts object                       |
 | `config`             | `config`               | `InteractiveChartConfig`     | null       | Chart configurations for init chart             |
 | `disabledJumpButton` | `disabled-jump-button` | `boolean`                    | false      | Hide jump to latest data button                 |
 | `disabledLegend`     | `disabled-legend`      | `boolean`                    | false      | Hide legend                                     |

package/lib/interactive-chart/index.d.ts

@@ -49,10 +49,14 @@ export declare class InteractiveChart extends ResponsiveElement {
      * Array of series instances in chart
      */
     seriesList: SeriesList[];
+    /**
+     * lightweight-charts object
+     * @type {IChartApi | null}
+     */
+    chart: IChartApi | null;
     private jumpButtonInitialized;
     private legendInitialized;
     private isCrosshairVisible;
-    protected chart: IChartApi | null;
     protected rowLegend: RowLegend;
     private timeScale;
     private width;

package/lib/interactive-chart/index.js

@@ -39,10 +39,14 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
          * Array of series instances in chart
          */
         this.seriesList = [];
+        /**
+         * lightweight-charts object
+         * @type {IChartApi | null}
+         */
+        this.chart = null;
         this.jumpButtonInitialized = false;
         this.legendInitialized = false;
         this.isCrosshairVisible = false;
-        this.chart = null;
         this.rowLegend = null;
         this.timeScale = null;
         this.width = 0;
@@ -514,7 +518,10 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
                     textColor: this.theme.textColor,
                     fontFamily: defaultFontFamily
                 },
-                priceScale: {
+                leftPriceScale: {
+                    borderColor: this.theme.scalePriceBorderColor
+                },
+                rightPriceScale: {
                     borderColor: this.theme.scalePriceBorderColor
                 },
                 timeScale: {
@@ -903,9 +910,11 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
             return this.getLegendPriceColor(this.seriesList[index].options().color);
         }
         else if (chartType === 'candlestick') {
-            const { close, open } = seriesData;
+            const priceValue = seriesData.hasOwnProperty('seriesData')
+                ? seriesData.seriesData.get(this.seriesList[index])
+                : seriesData;
             const barStyle = this.seriesList[index].options();
-            const colorBar = close > open ? barStyle.borderUpColor : barStyle.borderDownColor;
+            const colorBar = priceValue.close > priceValue.open ? barStyle.borderUpColor : barStyle.borderDownColor;
             return colorBar;
         }
         else if (chartType === 'bar') {
@@ -915,35 +924,17 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
             return this.getLegendPriceColor(this.seriesList[index].options().lineColor);
         }
         else if (chartType === 'volume') {
-            const priceValue = seriesData.hasOwnProperty('seriesData')
+            const dataItem = seriesData.hasOwnProperty('seriesData')
                 ? seriesData.seriesData.get(this.seriesList[index])
-                : seriesData.value;
-            let dataItem = {};
-            this.internalConfig.series[index].data.forEach((dataConfig) => {
-                const data = dataConfig;
-                const time = data.time;
-                const timeSeriesData = seriesData.time;
-                //  if via time point data string format 'yyyy-mm-dd' or object '{ year: 2019, month: 6, day: 1 }'
-                if (time.hasOwnProperty('day') && time.hasOwnProperty('month') && time.hasOwnProperty('year')) {
-                    if (time.day === timeSeriesData.day &&
-                        time.month === timeSeriesData.month &&
-                        time.year === timeSeriesData.year &&
-                        data.value === priceValue) {
-                        dataItem = dataConfig;
-                    }
+                : seriesData;
+            // check when each color is added, the item comes from the configuration
+            if (dataItem) {
+                if (dataItem.hasOwnProperty('color')) {
+                    return this.getLegendPriceColor(dataItem.color);
                 }
-                // if via config time uses a UNIX Timestamp format for time point data.
-                else if (time === seriesData.time) {
-                    dataItem = data;
+                else {
+                    return this.getLegendPriceColor(this.seriesList[index].options().color);
                 }
-            });
-            // check when each color is added, the item comes from the configuration
-            if (dataItem.hasOwnProperty('color')) {
-                const data = dataItem;
-                return this.getLegendPriceColor(data.color);
-            }
-            else {
-                return this.getLegendPriceColor(this.seriesList[index].options().color);
             }
         }
         return '';

package/lib/notification/helpers/status.d.ts

@@ -5,26 +5,26 @@ import type { Notification } from '../elements/notification';
  * @param duration Duration the notification should be displayed for.
  * @returns instance of the `Notification`.
  */
-declare const info: (message: string, duration: number) => Notification;
+declare const info: (message: string, duration?: number) => Notification;
 /**
  * Show a confirmation notification
  * @param message Message to show in the notification.
  * @param duration Duration the notification should be displayed for.
  * @returns instance of the `Notification`.
  */
-declare const confirm: (message: string, duration: number) => Notification;
+declare const confirm: (message: string, duration?: number) => Notification;
 /**
  * Show a warning notification
  * @param message Message to show in the notification.
  * @param duration Duration the notification should be displayed for.
  * @returns instance of the `Notification`.
  */
-declare const warn: (message: string, duration: number) => Notification;
+declare const warn: (message: string, duration?: number) => Notification;
 /**
  * Show an error notification
  * @param message Message to show in the notification.
  * @param duration Duration the notification should be displayed for.
  * @returns instance of the `Notification`.
  */
-declare const error: (message: string, duration: number) => Notification;
+declare const error: (message: string, duration?: number) => Notification;
 export { info, confirm, warn, error };

package/lib/notification/helpers/status.js

@@ -123,8 +123,8 @@ const error = (message, duration) => {
 };
 if (DEV_ENV) {
     // Show application errors, in development mode
-    window.addEventListener('error', (e) => {
-        error(e.message, 1000);
+    window.addEventListener('error', (event) => {
+        error(event.message, 1000);
     });
 }
 export { info, confirm, warn, error };

package/lib/notification/helpers/types.d.ts

@@ -6,5 +6,5 @@ export type Task = {
 export type TaskOptions = {
     message: string;
     type: string;
-    duration: number;
+    duration?: number;
 };

package/lib/number-field/index.d.ts

@@ -315,6 +315,7 @@ export declare class NumberField extends FormFieldElement {
      * inputmode="decimal" - show decimals keyboard by default
      * role="spinbutton" - number field is actually a spinner
      * aria-valuenow - current value or 0
+     * aria-valuetext - current value or 0, need this to improve user-friendly and human-understandable when screen reader announce value
      * @keydown - Listener for `keydown` event. Runs `this.onInputKeyDown`
      * @beforeinput - Listener for `beforeinput` event. Runs `this.onBeforeInputChange`
      * @returns template map

package/lib/number-field/index.js

@@ -724,6 +724,7 @@ let NumberField = class NumberField extends FormFieldElement {
      * inputmode="decimal" - show decimals keyboard by default
      * role="spinbutton" - number field is actually a spinner
      * aria-valuenow - current value or 0
+     * aria-valuetext - current value or 0, need this to improve user-friendly and human-understandable when screen reader announce value
      * @keydown - Listener for `keydown` event. Runs `this.onInputKeyDown`
      * @beforeinput - Listener for `beforeinput` event. Runs `this.onBeforeInputChange`
      * @returns template map
@@ -736,6 +737,7 @@ let NumberField = class NumberField extends FormFieldElement {
             inputmode: 'decimal',
             role: 'spinbutton',
             'aria-valuenow': `${this.value || 0}`,
+            'aria-valuetext': `${this.value || 0}`,
             '@keydown': this.onInputKeyDown,
             '@beforeinput': this.onBeforeInputChange
         };

package/lib/tooltip/helpers/renderer.d.ts

@@ -1,6 +1,6 @@
 import type { TooltipRenderer } from './types';
 /**
- * A default renderer that renders `tooltip` attribute
+ * A default renderer that renders `tooltip` or `data-tooltip` attributes
  * @param target Target to check
  * @returns tooltip or null or undefined
  */

package/lib/tooltip/helpers/renderer.js

@@ -1,11 +1,11 @@
 /**
- * A default renderer that renders `tooltip` attribute
+ * A default renderer that renders `tooltip` or `data-tooltip` attributes
  * @param target Target to check
  * @returns tooltip or null or undefined
  */
 const tooltipRenderer = (target) => {
-    if (target.hasAttribute('tooltip')) {
-        return target.getAttribute('tooltip');
+    if (target.hasAttribute('tooltip') || target.hasAttribute('data-tooltip')) {
+        return target.getAttribute('tooltip') || target.getAttribute('data-tooltip');
     }
 };
 export { tooltipRenderer };

package/lib/version.js

@@ -1 +1 @@
-export const VERSION = '7.1.0';
+export const VERSION = '7.2.1';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinitiv-ui/elements",
-  "version": "7.1.0",
+  "version": "7.2.1",
   "description": "Element Framework Elements",
   "author": "Refinitiv",
   "license": "Apache-2.0",
@@ -371,5 +371,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "dd5c33d0ad51c657aa168d4d995fe367f91dc5fd"
+  "gitHead": "33b12ffdedd23320fbdb8d2c8537cf1a316abcca"
 }