@refinitiv-ui/elements 5.0.0-beta.3 → 5.0.0-dev.204

package/lib/swing-gauge/helpers.js

@@ -0,0 +1,105 @@
+import { CenterLineStyle, DefaultStyle } from './const.js';
+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, 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 };

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

@@ -1,138 +1,284 @@
 import { JSXInterface } from '../jsx';
-import { CSSResult, ElementSize, PropertyValues } from '@refinitiv-ui/core';
-import { Canvas } from '../canvas';
+import { ResponsiveElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import '../canvas/index.js';
+import '../label/index.js';
+import type { 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 {
     /**
-     * A `CSSResult` that will be used
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
      */
-    static get styles(): CSSResult;
+    static get styles(): CSSResultGroup;
+    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;
+    /**
+     * Custom value formatter
+     * @type {SwingGaugeValueFormatter}
+     */
+    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;
+    /**
+    * Data requires to draw swing gauge
+    */
+    private data;
+    /**
+    * Internal sizes and scales
+    */
+    private width;
+    private height;
+    private size;
+    private lineLength;
+    private scale;
+    /**
+    * 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;
+    /**
+    * This for keep line number of label for calculate new radius
+    */
+    private labelLineNumber;
+    /**
+    * 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;
     /**
-     * On Updated Lifecycle
-     * @ignore
+     * Get secondary container element
+     */
+    private secondaryContainer;
+    /**
+     * Get legend container element
+     */
+    private legendContainer;
+    /**
+     * Get canvas element
+     */
+    private canvas;
+    /**
+     * Getter size of component
+     * @type {SwingGaugeCanvasSize}
+     * @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 dataValid;
+    private animateCanvas;
     /**
-     * Are we able to render?
-     * Used to prevent frame painting if data hasn't changed
-     * @returns {boolean} will return true if canvas can render
+     * Render chart
+     * @param onDraw drawing type
+     * @param isFrameUpdated Optional called by on frame event
+     * @returns {void}
      */
-    private canRender;
+    private renderCanvas;
     /**
-     * Calculate fill percentage and re-render chart
+     * Get computed swing-gauge data for drawing
+     * @returns swing-gauge data
+     */
+    private getData;
+    /**
+     * Get number from CSS declaration value
+     * @param styleValue value of CSS declaration
+     * @returns number without CSS unit
+     */
+    private getValueFromStyle;
+    /**
+     * 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;
 }
 
 declare global {
@@ -145,4 +291,6 @@ declare global {
       'ef-swing-gauge': Partial<SwingGauge> | JSXInterface.HTMLAttributes<SwingGauge>;
     }
   }
-}
+}
+
+export {};