@refinitiv-ui/elements 5.1.0 → 5.3.0

package/lib/swing-gauge/const.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"const.js","sourceRoot":"","sources":["../../src/swing-gauge/const.ts"],"names":[],"mappings":"AAAA,IAAK,OAGJ;AAHD,WAAK,OAAO;IACR,8BAAmB,CAAA;IACnB,kCAAuB,CAAA;AAC3B,CAAC,EAHI,OAAO,KAAP,OAAO,QAGX;AAED,IAAK,QAGJ;AAHD,WAAK,QAAQ;IACT,2BAAe,CAAA;IACf,2BAAe,CAAA;AACnB,CAAC,EAHI,QAAQ,KAAR,QAAQ,QAGZ;AAED,IAAK,eAIJ;AAJD,WAAK,eAAe;IAChB,kCAAe,CAAA;IACf,oCAAiB,CAAA;IACjB,oCAAiB,CAAA;AACrB,CAAC,EAJI,eAAe,KAAf,eAAe,QAInB;AAED,IAAK,YAOJ;AAPD,WAAK,YAAY;IACb,+CAA+B,CAAA;IAC/B,iDAAiC,CAAA;IACjC,sCAAsB,CAAA;IACtB,6CAA6B,CAAA;IAC7B,2CAA2B,CAAA;IAC3B,2CAA2B,CAAA;AAC/B,CAAC,EAPI,YAAY,KAAZ,YAAY,QAOhB;AAED,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,QAAQ,EAAE,CAAC"}

package/lib/swing-gauge/custom-elements.json

@@ -7,70 +7,97 @@
       "attributes": [
         {
           "name": "primary-value",
-          "description": "Set the primary value",
-          "type": "number",
-          "default": "\"50\""
+          "description": "Primary value",
+          "type": "number"
         },
         {
           "name": "primary-label",
-          "description": "Set the primary label",
+          "description": "Primary label",
           "type": "string",
           "default": "\"\""
         },
         {
           "name": "secondary-value",
-          "description": "Set the secondary value",
-          "type": "number",
-          "default": "\"50\""
+          "description": "Secondary value",
+          "type": "number"
         },
         {
           "name": "secondary-label",
-          "description": "Set the secondary label",
+          "description": "Secondary label",
           "type": "string",
           "default": "\"\""
         },
         {
           "name": "duration",
-          "description": "Sets the animation duration in milliseconds",
+          "description": "Animation duration in milliseconds",
           "type": "number",
-          "default": "\"1000\""
+          "default": "1000"
+        },
+        {
+          "name": "primary-legend",
+          "description": "Primary value legend",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "secondary-legend",
+          "description": "Secondary value legend",
+          "type": "string",
+          "default": "\"\""
         }
       ],
       "properties": [
         {
           "name": "primaryValue",
           "attribute": "primary-value",
-          "description": "Set the primary value",
-          "type": "number",
-          "default": "\"50\""
+          "description": "Primary value",
+          "type": "number"
         },
         {
           "name": "primaryLabel",
           "attribute": "primary-label",
-          "description": "Set the primary label",
+          "description": "Primary label",
           "type": "string",
           "default": "\"\""
         },
         {
           "name": "secondaryValue",
           "attribute": "secondary-value",
-          "description": "Set the secondary value",
-          "type": "number",
-          "default": "\"50\""
+          "description": "Secondary value",
+          "type": "number"
         },
         {
           "name": "secondaryLabel",
           "attribute": "secondary-label",
-          "description": "Set the secondary label",
+          "description": "Secondary label",
           "type": "string",
           "default": "\"\""
         },
         {
           "name": "duration",
           "attribute": "duration",
-          "description": "Sets the animation duration in milliseconds",
+          "description": "Animation duration in milliseconds",
           "type": "number",
-          "default": "\"1000\""
+          "default": "1000"
+        },
+        {
+          "name": "primaryLegend",
+          "attribute": "primary-legend",
+          "description": "Primary value legend",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "secondaryLegend",
+          "attribute": "secondary-legend",
+          "description": "Secondary value legend",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "valueFormatter",
+          "description": "Custome value formatter",
+          "default": "\"defaultValueFormatter\""
         },
         {
           "name": "canvasSize",

package/lib/swing-gauge/helpers.d.ts

@@ -0,0 +1,9 @@
+import { SwingGaugeCanvasSize, SwingGaugeData, SwingGaugeStyle } from './types';
+declare const helpers: {
+    draw: (drawData: SwingGaugeData, drawCtx: CanvasRenderingContext2D, drawParams: SwingGaugeStyle) => void;
+    clear: (canvasSize: SwingGaugeCanvasSize, drawCtx: CanvasRenderingContext2D) => void;
+    elasticOut: (time: number) => number;
+    textWidth: (drawCtx: CanvasRenderingContext2D, text: string, fontSize: number, fontFamily: string) => number;
+};
+export { helpers };
+//# sourceMappingURL=helpers.d.ts.map

package/lib/swing-gauge/helpers.js

@@ -0,0 +1,106 @@
+import { CenterLineStyle, DefaultStyle } from './const';
+let ctx;
+let data;
+let style;
+const clear = (canvasSize, drawCtx) => {
+    drawCtx.clearRect(0, 0, canvasSize.width, canvasSize.height);
+};
+const drawSegment = (start, end, color) => {
+    ctx.strokeStyle = color;
+    ctx.lineWidth = data.size * data.gaugeWidthScale;
+    ctx.beginPath();
+    ctx.arc(data.width / 2, data.height, data.size * data.gaugeHeightScale, (start + 1) * Math.PI, (end + 1) * Math.PI);
+    ctx.stroke();
+};
+const drawDot = (x, y) => {
+    ctx.fillStyle = DefaultStyle.CENTER_LINE_COLOR;
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.arc(x, y - 5, 4, 0, 2 * Math.PI);
+    ctx.fill();
+};
+const drawLine = (startX, startY, endX, endY, offset) => {
+    ctx.strokeStyle = DefaultStyle.CENTER_LINE_COLOR;
+    ctx.lineWidth = 2;
+    ctx.setLineDash([5, 3]);
+    ctx.beginPath();
+    ctx.moveTo(startX, startY - 5);
+    ctx.lineTo(endX, endY - 5);
+    ctx.lineTo(endX + offset, endY - 5);
+    ctx.stroke();
+    ctx.setLineDash([]);
+};
+const drawLinePointer = (startX, startY, endX, endY, offset) => {
+    drawDot(startX, startY);
+    drawLine(startX, startY, endX, endY, offset);
+};
+const draw = (drawData, drawCtx, drawParams) => {
+    data = drawData;
+    ctx = drawCtx;
+    style = drawParams;
+    const primaryStart = 0;
+    let secondaryStart = data.fillPercentage;
+    const primaryEnd = 1;
+    const secondaryEnd = 1;
+    secondaryStart = secondaryStart < 0.01 ? 0.01 : secondaryStart;
+    secondaryStart = secondaryStart > 0.99 ? 0.99 : secondaryStart;
+    // Draw segments
+    drawSegment(primaryStart, primaryEnd, style.primaryColor);
+    drawSegment(secondaryStart, secondaryEnd, style.secondaryColor);
+    // Draw Line pointer
+    drawLinePointer(data.offsetLeftPrimaryPoint, data.offsetTopPrimaryPoint, data.offsetLeftPrimaryLine, data.offsetTopPrimaryLine, -data.lineLength);
+    drawLinePointer(data.offsetLeftSecondaryPoint, data.offsetTopSecondaryPoint, data.offsetLeftSecondaryLine, data.offsetTopSecondaryLine, data.lineLength);
+    // Draw inner circle and lines
+    ctx.lineWidth = style.strokeWidth;
+    ctx.strokeStyle = style.borderColor;
+    ctx.beginPath();
+    ctx.arc(data.width / 2, data.height, data.size * data.gaugeUpperBound - style.strokeWidth / 2, 0, 2 * Math.PI);
+    ctx.strokeStyle = style.borderColor;
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.arc(data.width / 2, data.height, data.size * data.gaugeLowerBound, 0, 2 * Math.PI);
+    ctx.strokeStyle = style.borderColor;
+    ctx.stroke();
+    // Should we draw a center line?
+    if (Object.values(CenterLineStyle).includes(style.centerline)) {
+        ctx.save();
+        ctx.beginPath();
+        if (style.centerline === CenterLineStyle.SOLID) {
+            ctx.globalAlpha = Number(style.centerlineOpacity);
+        }
+        else if (style.centerline === CenterLineStyle.DOTTED) {
+            ctx.setLineDash([2, 2]);
+        }
+        else {
+            ctx.setLineDash([5, 3]);
+        }
+        ctx.moveTo(data.width / 2, data.height - data.size * data.gaugeLowerBound);
+        ctx.lineTo(data.width / 2, data.height - (data.size * data.gaugeUpperBound) + style.strokeWidth);
+        ctx.strokeStyle = style.centerlineColor;
+        ctx.stroke();
+        ctx.restore();
+    }
+};
+// Helper function for elastic easing
+const elasticOut = ((amplitude, period) => {
+    const pi2 = Math.PI * 2;
+    return function (time) {
+        if (time === 0 || time === 1) {
+            return time;
+        }
+        const s = (period / pi2) * Math.asin(1 / amplitude);
+        return (amplitude * Math.pow(2, -10 * time) * Math.sin(((time - s) * pi2) / period) + 1);
+    };
+})(1.2, 0.5);
+const textWidth = (drawCtx, text, fontSize, fontFamily) => {
+    drawCtx.font = `${fontSize}px ${fontFamily}`;
+    return drawCtx.measureText(text).width;
+};
+const helpers = {
+    draw,
+    clear,
+    elasticOut,
+    textWidth
+};
+export { helpers };
+//# sourceMappingURL=helpers.js.map

package/lib/swing-gauge/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../src/swing-gauge/helpers.ts"],"names":[],"mappings":"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"}

package/lib/swing-gauge/index.d.ts

@@ -1,10 +1,13 @@
 import { JSXInterface } from '../jsx';
-import { CSSResult, ElementSize, PropertyValues } from '@refinitiv-ui/core';
-import { Canvas } from '../canvas';
+import { ResponsiveElement, CSSResult, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import '../canvas';
+import '../label';
+import { SwingGaugeCanvasSize, SwingGaugeValueFormatter } from './types';
+export { SwingGaugeValueFormatter };
 /**
  * Data visualisation showing the percentage between two values
  */
-export declare class SwingGauge extends Canvas {
+export declare class SwingGauge extends ResponsiveElement {
     /**
      * Element version number
      * @returns version number
@@ -17,129 +20,263 @@ export declare class SwingGauge extends Canvas {
      * @return CSS template
      */
     static get styles(): CSSResult;
+    private _primaryValue;
     /**
-     * Set the primary value
-     * @default 50
+     * Primary value
+     * @param value primary value
      */
-    primaryValue: number;
+    set primaryValue(value: number);
+    get primaryValue(): number;
     /**
-     * Set the primary label
+     * Primary label
      */
     primaryLabel: string;
+    private _secondaryValue;
     /**
-     * Set the secondary value
-     * @default 50
+     * Secondary value
+     * @param value secondary value
      */
-    secondaryValue: number;
+    set secondaryValue(value: number);
+    get secondaryValue(): number;
     /**
-     * Set the secondary label
+     * Secondary label
      */
     secondaryLabel: string;
     /**
-     * Sets the animation duration in milliseconds
-     * @default 1000
+     * Animation duration in milliseconds
      */
     duration: number;
     /**
-     * Getter size of component
-     * @returns {ElementSize} return size of component
+    * Primary value legend
+    */
+    primaryLegend: string;
+    /**
+    * Secondary value legend
+    */
+    secondaryLegend: string;
+    /**
+     * Custome value formatter
+     */
+    valueFormatter: SwingGaugeValueFormatter;
+    /**
+     * Controls swing gauge animations
      */
-    get canvasSize(): ElementSize;
-    private w;
-    private h;
-    private min;
-    private max;
-    private size;
-    private maxFontSize;
-    private centerlineOptions;
     private onFrame;
     private cancelFrame;
-    private previousFillPercentage;
+    private requestedAnimationID;
+    private gaugeWidthScale;
+    private gaugeHeightScale;
+    private gaugeUpperBound;
+    private gaugeLowerBound;
+    private linePointerOffset;
+    private pointPointerOffset;
+    private primaryLineRadian;
+    private secondaryLineRadian;
+    private linePointerOffsetOverflow;
+    /**
+    * Data requires to draw swing gauge
+    */
+    private data;
+    /**
+    * Internal sizes and scales
+    */
+    private width;
+    private height;
+    private size;
+    private lineLength;
+    private scale;
+    private overflowScale;
+    /**
+    * Current fill percentage
+    */
     private fillPercentage;
-    private frameHandler;
-    constructor();
     /**
-     * Re-draw canvas when the size of component changed
-     * @ignore
-     * @param size element dimensions
-     * @returns {void}
+    * Keeps previous percentage calculation to avoid re-rendering the same value
+    */
+    private previousFillPercentage;
+    /**
+    * Get primary percentage
+    */
+    private get primaryPercentage();
+    /**
+    * Get secondary percentage
+    */
+    private get secondaryPercentage();
+    /**
+     * Check width and height are valid
+     * @returns if size is valid
      */
-    resizedCallback(size: ElementSize): void;
+    private get hasValidSize();
     /**
-     * Handles when event frame fired to re-draw canvas
-     * @protected
-     * @param time timestamp
-     * @returns {void}
+     * Get default value format
+     * @param value A value on each side of swing gauge
+     * @returns default value format
      */
-    protected fireFrame(time: number): void;
+    private defaultValueFormatter;
     /**
-     * On First Updated Lifecycle
-     * @ignore
-     * @param changedProperties changed properties
-     * @returns {void}
+     * Style for primary container
      */
-    protected firstUpdated(changedProperties: PropertyValues): void;
+    private primaryContainerStyle;
     /**
-     * On Update Lifecycle
-     * @ignore
-     * @param changedProperties changed properties
-     * @returns {void}
+     * Style for secondary container
      */
-    protected update(changedProperties: PropertyValues): void;
+    private secondaryContainerStyle;
+    /**
+     * Style for label
+     */
+    private labelStyle;
+    /**
+     * Style for both values
+     */
+    private valueStyle;
+    /**
+     * Get primary container element
+     */
+    private primaryContainer;
+    /**
+     * Get secondary container element
+     */
+    private secondaryContainer;
+    /**
+     * Get legend container element
+     */
+    private legendContainer;
+    /**
+     * Get canvas element
+     */
+    private canvas;
     /**
-     * On Updated Lifecycle
-     * @ignore
+     * Getter size of component
+     * @returns return size of canvas
+     */
+    get canvasSize(): SwingGaugeCanvasSize;
+    /**
+     * Validate number
+     * @protected
+     * @param value number that want to validate
+     * @param propName name of property
+     * @returns {number} valid number
+     */
+    protected validateNumber(value: number, propName: string): number;
+    /**
+     * On update lifecycle
      * @param changedProperties changed properties
      * @returns {void}
      */
-    protected updated(changedProperties: PropertyValues): void;
+    protected update(changedProperties: PropertyValues): void;
     /**
      * Handles when component disconnected
-     * @private
      * @returns {void}
      */
     disconnectedCallback(): void;
     /**
      * Calls easing based on both left and right values
-     * @private
-     * @param {number} v1 left value
-     * @param {number} v2 right value
+     * @param primaryValue primary value
+     * @param secondaryValue secondary value
      * @returns {void}
      */
     private ease;
     /**
      * Eases the fill percentage
-     * @private
-     * @param {number} to ease to value
-     * @param {number} from ease from value
-     * @param {number} time ease time
+     * @param to ease to value
+     * @param from ease from value
+     * @param time ease time
      * @returns {void}
      */
     private easeTo;
     /**
-     * Does the control has valid data?
-     * @returns {boolean} will return true if valid data
+     * Restart the animation, re-render the canvas
+     * @returns {void}
+     */
+    private animateCanvas;
+    /**
+     * Render chart
+     * @param onDraw drawing type
+     * @param isFrameUpdated Optional called by on frame event
+     * @returns {void}
+     */
+    private renderCanvas;
+    /**
+     * Get computed swing-gauge data for drawing
+     * @returns swing-gauge data
      */
-    private dataValid;
+    private getData;
     /**
-     * Are we able to render?
-     * Used to prevent frame painting if data hasn't changed
-     * @returns {boolean} will return true if canvas can render
+     * Get number from CSS declaration value
+     * @param styleValue value of CSS declaration
+     * @returns number without CSS unit
      */
-    private canRender;
+    private getValueFromStyle;
     /**
-     * Calculate fill percentage and re-render chart
+     * Compute and update style of containers and labels
      * @returns {void}
      */
-    private reDrawCanvas;
+    private updateGaugePositions;
     /**
-     * Render chart
-     * @param isFrameUpdated Optional called by on frame event
+     * Compute position style
+     * @param segment primary or secondary
+     * @param maxRadian max radian
+     * @param radiusOffset radius offset from gauge upper bound
+     * @param offset line length offset
+     * @returns position style
+     */
+    private getPositionStyle;
+    /**
+     * Scales canvas variables making it responsive before painting
      * @returns {void}
      */
-    private renderCanvas;
+    private calculateCanvasSize;
+    /**
+     * Calculate and update font sizes on canvas
+     * @returns {void}
+     */
+    private updateFontSize;
+    /**
+     * Calculate label or value font size
+     * @param ctx canvas context
+     * @param textType text type
+     * @returns {number} font size
+     */
+    private calculateFontSize;
+    /**
+     * Update label font size
+     * @returns {void}
+     */
+    private calculateLabelFontSize;
+    /**
+     * Update value font size
+     * @returns {void}
+     */
+    private calculateValueFontSize;
+    /**
+     * Compute percentage of value
+     * @param value value of primary or secondary
+     * @returns percentage of value
+     */
+    private getPercentage;
+    /**
+     * Handles canvas resize
+     * @returns {void}
+     */
+    private onCanvasResize;
+    /**
+     * Renders legend container
+     * @returns {TemplateResult} Legend template or null
+     */
+    private get legendTemplate();
+    /**
+     * Renders primary legend if property present
+     * @returns {TemplateResult} Primary legend template or null
+     */
+    private get primaryLegendTemplate();
+    /**
+     * Renders secondary legend if property present
+     * @returns {TemplateResult} Secondary legend template or null
+     */
+    private get secondaryLegendTemplate();
+    render(): TemplateResult;
 }
-
+//# sourceMappingURL=index.d.ts.map
 declare global {
   interface HTMLElementTagNameMap {
     'ef-swing-gauge': SwingGauge;