@refinitiv-ui/elements 5.12.0-alpha.1 → 5.12.0-alpha.2

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

@@ -0,0 +1,296 @@
+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;
+    /**
+     * Custom value formatter
+     * @type {SwingGaugeValueFormatter}
+     */
+    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
+     * @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 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 {};