@refinitiv-ui/elements 5.3.3 → 5.7.0

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

@@ -0,0 +1,294 @@
+import { JSXInterface } from '../jsx';
+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 ResponsiveElement {
+    /**
+     * 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(): CSSResultGroup;
+    private _primaryValue;
+    /**
+     * Primary value
+     * @param value primary value
+     */
+    set primaryValue(value: number);
+    get primaryValue(): number;
+    /**
+     * Primary label
+     */
+    primaryLabel: string;
+    private _secondaryValue;
+    /**
+     * Secondary value
+     * @param value secondary value
+     */
+    set secondaryValue(value: number);
+    get secondaryValue(): number;
+    /**
+     * Secondary label
+     */
+    secondaryLabel: string;
+    /**
+     * Animation duration in milliseconds
+     */
+    duration: number;
+    /**
+    * Primary value legend
+    */
+    primaryLegend: string;
+    /**
+    * Secondary value legend
+    */
+    secondaryLegend: string;
+    /**
+     * Custome value formatter
+     */
+    valueFormatter: SwingGaugeValueFormatter;
+    /**
+     * Controls swing gauge animations
+     */
+    private onFrame;
+    private cancelFrame;
+    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;
+    /**
+    * 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
+     */
+    private get hasValidSize();
+    /**
+     * Get default value format
+     * @param value A value on each side of swing gauge
+     * @returns default value format
+     */
+    private defaultValueFormatter;
+    /**
+     * Style for primary container
+     */
+    private primaryContainerStyle;
+    /**
+     * Style for secondary container
+     */
+    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;
+    /**
+     * 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 update(changedProperties: PropertyValues): void;
+    /**
+     * Handles when component disconnected
+     * @returns {void}
+     */
+    disconnectedCallback(): void;
+    /**
+     * Calls easing based on both left and right values
+     * @param primaryValue primary value
+     * @param secondaryValue secondary value
+     * @returns {void}
+     */
+    private ease;
+    /**
+     * Eases the fill percentage
+     * @param to ease to value
+     * @param from ease from value
+     * @param time ease time
+     * @returns {void}
+     */
+    private easeTo;
+    /**
+     * 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 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 updateGaugePositions;
+    /**
+     * 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 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 {
+  interface HTMLElementTagNameMap {
+    'ef-swing-gauge': SwingGauge;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-swing-gauge': Partial<SwingGauge> | JSXInterface.HTMLAttributes<SwingGauge>;
+    }
+  }
+}
+
+export {};