@refinitiv-ui/elements 0.0.0-build.1957399501.1

package/lib/swing-gauge/index.js

@@ -0,0 +1,770 @@
+import { __decorate } from "tslib";
+import { ResponsiveElement, css, html, WarningNotice } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { query } from '@refinitiv-ui/core/decorators/query.js';
+import { state } from '@refinitiv-ui/core/decorators/state.js';
+import { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
+import { VERSION } from '../version.js';
+import '../canvas/index.js';
+import '../label/index.js';
+import { helpers as canvasHelper } from './helpers.js';
+import { DefaultStyle, Segment, TextType } from './const.js';
+/**
+ * Constants from swing-gauge default specs
+ */
+const GAUGE_WIDTH_SCALE = 0.4;
+const GAUGE_HEIGHT_SCALE = 0.8;
+const GAUGE_UPPER_BOUND = GAUGE_HEIGHT_SCALE + GAUGE_WIDTH_SCALE / 2;
+const GAUGE_LOWER_BOUND = GAUGE_HEIGHT_SCALE - GAUGE_WIDTH_SCALE / 2;
+const PRIMARY_RADIAN = 1.25;
+const SECONDARY_RADIAN = 1.75;
+const LINE_POINTER_OFFSET = 0.3;
+const POINT_POINTER_OFFSET = 0.1;
+const DEFAULT_OFFSET = 0.05;
+const OVERFLOW_OFFSET = 0.08;
+// When either value is below this threshold, the label position changes
+const GAUGE_PERCENTAGE_THRESHOLD = 30;
+const GAUGE_LABEL_FONT_SCALE = 0.14;
+const GAUGE_VALUE_FONT_SCALE = 0.18;
+const MIN_LABEL_FONT_SIZE = 12;
+const MIN_VALUE_FONT_SIZE = 15;
+const MAX_LABEL_LINE = 3;
+const MAX_VALUE_LINE = 1;
+const MAX_LEGEND_LINE = 2;
+/**
+ * Data visualisation showing the percentage between two values
+ */
+let SwingGauge = class SwingGauge extends ResponsiveElement {
+    constructor() {
+        super(...arguments);
+        this._primaryValue = 0;
+        /**
+         * Primary label
+         */
+        this.primaryLabel = '';
+        this._secondaryValue = 0;
+        /**
+         * Secondary label
+         */
+        this.secondaryLabel = '';
+        /**
+         * Animation duration in milliseconds
+         */
+        this.duration = 1000;
+        /**
+        * Primary value legend
+        */
+        this.primaryLegend = '';
+        /**
+        * Secondary value legend
+        */
+        this.secondaryLegend = '';
+        /**
+         * Custom value formatter
+         * @type {SwingGaugeValueFormatter}
+         */
+        this.valueFormatter = this.defaultValueFormatter;
+        /**
+         * Controls swing gauge animations
+         */
+        this.onFrame = requestAnimationFrame.bind(window);
+        this.cancelFrame = cancelAnimationFrame.bind(window);
+        this.requestedAnimationID = 0;
+        this.gaugeWidthScale = GAUGE_WIDTH_SCALE;
+        this.gaugeHeightScale = GAUGE_HEIGHT_SCALE;
+        this.gaugeUpperBound = GAUGE_UPPER_BOUND;
+        this.gaugeLowerBound = GAUGE_LOWER_BOUND;
+        this.linePointerOffset = LINE_POINTER_OFFSET;
+        this.pointPointerOffset = POINT_POINTER_OFFSET;
+        this.primaryLineRadian = PRIMARY_RADIAN;
+        this.secondaryLineRadian = SECONDARY_RADIAN;
+        /**
+        * Data requires to draw swing gauge
+        */
+        this.data = null;
+        /**
+        * Internal sizes and scales
+        */
+        this.width = 0;
+        this.height = 0;
+        this.size = 0;
+        this.lineLength = 60;
+        this.scale = 1;
+        /**
+        * Current fill percentage
+        */
+        this.fillPercentage = 0;
+        /**
+        * Keeps previous percentage calculation to avoid re-rendering the same value
+        */
+        this.previousFillPercentage = 0;
+        /**
+        * This for keep line number of label for calculate new radius
+        */
+        this.labelLineNumber = 1;
+        /**
+         * Style for primary container
+         */
+        this.primaryContainerStyle = {};
+        /**
+         * Style for secondary container
+         */
+        this.secondaryContainerStyle = {};
+        /**
+         * Style for label
+         */
+        this.labelStyle = {};
+        /**
+         * Style for both values
+         */
+        this.valueStyle = {};
+    }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * 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() {
+        return css `
+      :host {
+        display: block;
+        height: 200px;
+      }
+      :host [part=container] {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+      :host [part=canvas-container] {
+        position: relative;
+        flex: 1;
+      }
+      :host [part=canvas] {
+        height: 100%;
+      }
+      :host [part=primary-legend], [part=secondary-legend] {
+        text-align: left;
+        display: flex;
+      }
+      :host [part=primary-label], [part=primary-value] {
+        text-align: left;
+      }
+      :host [part=secondary-label], [part=secondary-value] {
+        text-align: right;
+      }
+      :host [part=legend-container-outer] {
+        width: 60%;
+        margin: 0 auto;
+        text-align: center;
+      }
+      :host [part=legend-container-inner] {
+        max-width: 100%;
+        display: inline-block;
+      }
+      :host [part=primary-legend-symbol], [part=secondary-legend-symbol] {
+        display: inline-block;
+        flex-shrink: 0;
+      }
+      :host [part=primary-container] {
+        position: absolute;
+        text-align: left;
+      }
+      :host [part=secondary-container] {
+        position: absolute;
+        text-align: right;
+      }
+    `;
+    }
+    /**
+     * Primary value
+     * @param value primary value
+     */
+    set primaryValue(value) {
+        value = this.validateNumber(value, 'primary-value');
+        const oldValue = this._primaryValue;
+        if (oldValue !== value) {
+            this._primaryValue = value;
+            this.requestUpdate('primaryValue', oldValue);
+        }
+    }
+    get primaryValue() {
+        return this._primaryValue;
+    }
+    /**
+     * Secondary value
+     * @param value secondary value
+     */
+    set secondaryValue(value) {
+        value = this.validateNumber(value, 'secondary-value');
+        const oldValue = this._secondaryValue;
+        if (oldValue !== value) {
+            this._secondaryValue = value;
+            this.requestUpdate('secondaryValue', oldValue);
+        }
+    }
+    get secondaryValue() {
+        return this._secondaryValue;
+    }
+    /**
+    * Get primary percentage
+    */
+    get primaryPercentage() {
+        return this.getPercentage(this.primaryValue);
+    }
+    /**
+    * Get secondary percentage
+    */
+    get secondaryPercentage() {
+        return this.getPercentage(this.secondaryValue);
+    }
+    /**
+     * Check width and height are valid
+     * @returns if size is valid
+     */
+    get hasValidSize() {
+        return this.offsetWidth > 0 && this.offsetHeight > 0 && this.canvas.width > 0 && this.canvas.height > 0;
+    }
+    /**
+     * Get default value format
+     * @param value A value on each side of swing gauge
+     * @returns default value format
+     */
+    defaultValueFormatter(value) {
+        return `${value.toFixed(2)}%`;
+    }
+    /**
+     * Getter size of component
+     * @type {SwingGaugeCanvasSize}
+     * @returns return size of canvas
+     */
+    get canvasSize() {
+        return {
+            width: this.offsetWidth,
+            height: this.offsetHeight
+        };
+    }
+    /**
+     * Validate number
+     * @protected
+     * @param value number that want to validate
+     * @param propName name of property
+     * @returns {number} valid number
+     */
+    validateNumber(value, propName) {
+        if (typeof value === 'number' && !isNaN(value) && isFinite(value) && value >= 0) {
+            return value;
+        }
+        new WarningNotice(`${this.localName} : The specified value "${value}" of ${propName} property is not valid. Default value will be used instead.`).show();
+        return 0;
+    }
+    /**
+     * On update lifecycle
+     * @param changedProperties changed properties
+     * @returns {void}
+     */
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('primaryValue') || changedProperties.has('secondaryValue')
+            || (this.primaryValue === 0 && this.secondaryValue === 0)) {
+            this.canvas.autoloop = true;
+            this.renderCanvas('frame');
+            this.animateCanvas();
+        }
+        if (changedProperties.has('primaryLabel') || changedProperties.has('secondaryLabel')) {
+            this.calculateLabelFontSize();
+        }
+        if (changedProperties.has('valueFormatter')) {
+            this.calculateValueFontSize();
+        }
+        if (changedProperties.has('primaryValue') || changedProperties.has('secondaryValue')
+            || changedProperties.has('primaryLabel') || changedProperties.has('secondaryLabel')
+            || changedProperties.has('valueFormatter')) {
+            this.updateGaugePositions();
+        }
+    }
+    /**
+     * Handles when component disconnected
+     * @returns {void}
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.requestedAnimationID) {
+            this.cancelFrame(this.requestedAnimationID);
+        }
+    }
+    /**
+     * Calls easing based on both left and right values
+     * @param primaryValue primary value
+     * @param secondaryValue secondary value
+     * @returns {void}
+     */
+    ease(primaryValue, secondaryValue) {
+        let to = 0.5;
+        let from = this.fillPercentage;
+        if (primaryValue > 0 || secondaryValue > 0) {
+            to = primaryValue / (primaryValue + secondaryValue);
+        }
+        // this for prevent gauge not render when 'to' and 'from' are 0
+        if (primaryValue === 0 && from === 0) {
+            from = 0.1;
+        }
+        this.easeTo(to, from, performance.now() + this.duration);
+    }
+    /**
+     * Eases the fill percentage
+     * @param to ease to value
+     * @param from ease from value
+     * @param time ease time
+     * @returns {void}
+     */
+    easeTo(to, from, time) {
+        const diff = (this.duration - (time - performance.now())) / this.duration;
+        this.fillPercentage = from + (to - from) * canvasHelper.elasticOut(diff > 1 ? 1 : diff < 0 ? 0 : diff) || 0;
+        if (this.fillPercentage !== to) {
+            this.cancelFrame(this.requestedAnimationID);
+            this.requestedAnimationID = this.onFrame(() => this.easeTo(to, from, time));
+        }
+        else {
+            this.canvas.autoloop = false;
+        }
+        this.renderCanvas('frame', true);
+    }
+    /**
+     * Restart the animation, re-render the canvas
+     * @returns {void}
+     */
+    animateCanvas() {
+        this.ease(this.primaryValue, this.secondaryValue);
+    }
+    /**
+     * Render chart
+     * @param onDraw drawing type
+     * @param isFrameUpdated Optional called by on frame event
+     * @returns {void}
+     */
+    renderCanvas(onDraw, isFrameUpdated) {
+        const percentageChanged = this.previousFillPercentage !== this.fillPercentage;
+        const canRender = this.hasValidSize && percentageChanged;
+        if ((isFrameUpdated && !canRender) || !this.hasValidSize) {
+            return;
+        }
+        this.width = this.canvas.width;
+        this.height = this.canvas.height;
+        const min = this.width > this.height ? this.height : this.width;
+        const max = this.width > this.height ? this.width : this.height;
+        this.size = Math.floor(max / this.scale < min ? max / this.scale : min);
+        const canvasSize = { width: this.width, height: this.height };
+        // Prevent draw frame unnecessary recalculate position and draw data
+        if (!isFrameUpdated) {
+            this.data = this.getData();
+        }
+        else if (this.data !== null) {
+            this.data.fillPercentage = this.fillPercentage;
+        }
+        const clear = () => {
+            if (!this.canvas.ctx) {
+                return;
+            }
+            canvasHelper.clear(canvasSize, this.canvas.ctx);
+        };
+        this.canvas.addEventListener(onDraw, clear, { once: true });
+        const draw = () => {
+            if (!this.canvas.ctx) {
+                return;
+            }
+            canvasHelper.draw(this.data === null ? this.getData() : this.data, this.canvas.ctx, {
+                strokeWidth: Math.ceil(this.scale * this.size * 0.005),
+                primaryColor: this.getComputedVariable('--primary-color', DefaultStyle.PRIMARY_GAUGE_COLOR),
+                secondaryColor: this.getComputedVariable('--secondary-color', DefaultStyle.SECONDARY_GAUGE_COLOR),
+                borderColor: this.getComputedVariable('--border-color', DefaultStyle.BOREDER_COLOR),
+                centerline: `${this.getComputedVariable('--center-line', DefaultStyle.CENTER_LINE_STYLE)}`.trim(),
+                centerlineOpacity: this.getComputedVariable('--center-line-opacity', DefaultStyle.CENTER_LINE_OPACITY),
+                centerlineColor: this.getComputedVariable('--center-line-color', DefaultStyle.CENTER_LINE_COLOR)
+            });
+        };
+        this.canvas.addEventListener(onDraw, draw, { once: true });
+        // Set this for comparison when deciding if we should paint
+        this.previousFillPercentage = this.fillPercentage;
+    }
+    /**
+     * Get computed swing-gauge data for drawing
+     * @returns swing-gauge data
+     */
+    getData() {
+        // Recalculate radius to prevent container overflow
+        const gaugeHeight = this.size * this.gaugeHeightScale;
+        const containerHeight = this.labelLineNumber * MIN_LABEL_FONT_SIZE + MIN_VALUE_FONT_SIZE;
+        if (containerHeight > gaugeHeight) {
+            // The value of 'reverseScale' increases as the value of 'scale' decreases.
+            const reverseScale = 1 - this.scale;
+            // increase the offset by 25%, this for buffer to make label have some space from bottom
+            this.linePointerOffset = (containerHeight / gaugeHeight) * reverseScale * 1.25;
+            this.primaryLineRadian = PRIMARY_RADIAN + DEFAULT_OFFSET + (OVERFLOW_OFFSET * reverseScale);
+            this.secondaryLineRadian = 3 - this.primaryLineRadian;
+        }
+        const primaryPosLine = this.getPositionStyle(Segment.PRIMARY, this.primaryLineRadian, this.linePointerOffset, 0);
+        const primaryPosPoint = this.getPositionStyle(Segment.PRIMARY, PRIMARY_RADIAN, this.pointPointerOffset, 0);
+        const secondaryPosLine = this.getPositionStyle(Segment.SECONDARY, this.secondaryLineRadian, this.linePointerOffset, 0);
+        const secondaryPosPoint = this.getPositionStyle(Segment.SECONDARY, SECONDARY_RADIAN, this.pointPointerOffset, 0);
+        return {
+            width: this.width,
+            height: this.height,
+            size: this.size,
+            fillPercentage: this.fillPercentage,
+            gaugeWidthScale: this.gaugeWidthScale,
+            gaugeHeightScale: this.gaugeHeightScale,
+            gaugeUpperBound: this.gaugeUpperBound,
+            gaugeLowerBound: this.gaugeLowerBound,
+            lineLength: this.lineLength,
+            offsetLeftPrimaryLine: this.getValueFromStyle(primaryPosLine.left),
+            offsetTopPrimaryLine: this.getValueFromStyle(primaryPosLine.top),
+            offsetLeftPrimaryPoint: this.getValueFromStyle(primaryPosPoint.left),
+            offsetTopPrimaryPoint: this.getValueFromStyle(primaryPosPoint.top),
+            offsetLeftSecondaryLine: this.getValueFromStyle(secondaryPosLine.left),
+            offsetTopSecondaryLine: this.getValueFromStyle(secondaryPosLine.top),
+            offsetLeftSecondaryPoint: this.getValueFromStyle(secondaryPosPoint.left),
+            offsetTopSecondaryPoint: this.getValueFromStyle(secondaryPosPoint.top)
+        };
+    }
+    /**
+     * Get number from CSS declaration value
+     * @param styleValue value of CSS declaration
+     * @returns number without CSS unit
+     */
+    getValueFromStyle(styleValue) {
+        return Number(styleValue?.replace('px', ''));
+    }
+    /**
+     * Compute and update style of containers and labels
+     * @returns {void}
+     */
+    updateGaugePositions() {
+        if (!this.hasValidSize) {
+            return;
+        }
+        const primaryPosition = this.getPositionStyle(Segment.PRIMARY, this.primaryLineRadian, this.linePointerOffset, -this.lineLength);
+        const secondaryPosition = this.getPositionStyle(Segment.SECONDARY, this.secondaryLineRadian, this.linePointerOffset, 0);
+        this.primaryContainerStyle = {
+            width: `${this.lineLength}px`,
+            ...primaryPosition
+        };
+        this.secondaryContainerStyle = {
+            width: `${this.lineLength}px`,
+            ...secondaryPosition
+        };
+        // position container over line pointer
+        if (this.primaryPercentage < GAUGE_PERCENTAGE_THRESHOLD) {
+            delete this.primaryContainerStyle.top;
+            this.primaryContainerStyle.bottom = '5px';
+        }
+        if (this.secondaryPercentage < GAUGE_PERCENTAGE_THRESHOLD || this.secondaryValue === 0) {
+            delete this.secondaryContainerStyle.top;
+            this.secondaryContainerStyle.bottom = '5px';
+        }
+    }
+    /**
+     * 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
+     */
+    getPositionStyle(segment, maxRadian, radiusOffset, offset) {
+        let radius = this.size * (1 + radiusOffset) * this.scale;
+        let radianValue;
+        if (segment === Segment.PRIMARY) {
+            radianValue = this.primaryPercentage >= GAUGE_PERCENTAGE_THRESHOLD ? maxRadian : 1;
+        }
+        else {
+            radianValue = this.secondaryPercentage >= GAUGE_PERCENTAGE_THRESHOLD ? maxRadian : 0;
+        }
+        // reduce line length when line is on the bottom of canvas
+        if ((radianValue === 1 || radianValue === 0) && radiusOffset > 0.1) {
+            radius = this.size * (1 + this.pointPointerOffset) * this.scale;
+        }
+        const radian = radianValue * Math.PI;
+        const left = `${Math.round(this.width / 2 + Math.cos(radian) * radius) + offset}px`;
+        const top = `${Math.round(this.height + Math.sin(radian) * radius)}px`;
+        return { left: left, top: top };
+    }
+    /**
+     * Scales canvas variables making it responsive before painting
+     * @returns {void}
+     */
+    calculateCanvasSize() {
+        const lineLength = this.canvas.height * 0.75;
+        const bestWidth = 2 * (GAUGE_UPPER_BOUND + LINE_POINTER_OFFSET) * this.canvas.height + 2 * lineLength;
+        const ratio = bestWidth / this.canvas.height;
+        this.scale = 1;
+        if (this.canvas.width < bestWidth) {
+            const width = this.canvas.width;
+            const bestHeight = width / ratio;
+            this.scale = bestHeight / this.canvas.height;
+        }
+        this.scale = this.scale < 0.1 ? 0.1 : this.scale;
+        this.lineLength = this.scale * lineLength;
+        this.gaugeWidthScale = this.scale * GAUGE_WIDTH_SCALE;
+        this.gaugeHeightScale = this.scale * GAUGE_HEIGHT_SCALE;
+        this.gaugeUpperBound = this.scale * GAUGE_UPPER_BOUND;
+        this.gaugeLowerBound = this.scale * GAUGE_LOWER_BOUND;
+        this.primaryLineRadian = PRIMARY_RADIAN;
+        this.secondaryLineRadian = SECONDARY_RADIAN;
+        this.linePointerOffset = LINE_POINTER_OFFSET;
+        this.pointPointerOffset = POINT_POINTER_OFFSET;
+        if (this.scale < 1) {
+            // The value of 'reverseScale' increases as the value of 'scale' decreases.
+            // This mean when scale down the offset will grow up
+            const reverseScale = 1 - this.scale;
+            const offset = DEFAULT_OFFSET * reverseScale;
+            this.primaryLineRadian = PRIMARY_RADIAN + offset;
+            this.secondaryLineRadian = SECONDARY_RADIAN - offset;
+            this.linePointerOffset = LINE_POINTER_OFFSET + (0.4 * (1 - this.scale));
+        }
+        this.primaryLineRadian = this.primaryLineRadian > 1.3 ? 1.3 : this.primaryLineRadian;
+        this.secondaryLineRadian = this.primaryLineRadian > 1.7 ? 1.7 : this.secondaryLineRadian;
+    }
+    /**
+     * Calculate and update font sizes on canvas
+     * @returns {void}
+     */
+    updateFontSize() {
+        this.calculateLabelFontSize();
+        this.calculateValueFontSize();
+    }
+    /**
+     * Calculate label or value font size
+     * @param ctx canvas context
+     * @param textType text type
+     * @returns {number} font size
+     */
+    calculateFontSize(ctx, textType) {
+        let maxLine;
+        let minFontSize;
+        let widthScale;
+        let fontSize;
+        let longerLabel;
+        if (textType === TextType.LABEL) {
+            maxLine = MAX_LABEL_LINE;
+            minFontSize = MIN_LABEL_FONT_SIZE;
+            // buffer for word wrap
+            widthScale = 1.1;
+            longerLabel = this.primaryLabel.length > this.secondaryLabel.length ? this.primaryLabel : this.secondaryLabel;
+            fontSize = Math.ceil(this.scale * this.canvas.height * GAUGE_LABEL_FONT_SCALE);
+        }
+        else {
+            maxLine = MAX_VALUE_LINE;
+            minFontSize = MIN_VALUE_FONT_SIZE;
+            widthScale = 1;
+            const primaryValue = String(this.valueFormatter(this.primaryPercentage, this.primaryValue));
+            const secondaryValue = String(this.valueFormatter(this.secondaryPercentage, this.secondaryValue));
+            longerLabel = primaryValue.length > secondaryValue.length ? primaryValue : secondaryValue;
+            fontSize = Math.ceil(this.scale * this.canvas.height * GAUGE_VALUE_FONT_SCALE);
+        }
+        let textWidth = canvasHelper.textWidth(ctx, longerLabel, fontSize, getComputedStyle(this).fontFamily);
+        let numberOfLines = Math.ceil(textWidth / this.lineLength);
+        if (numberOfLines > maxLine) {
+            numberOfLines = maxLine;
+        }
+        if (textType === TextType.LABEL) {
+            this.labelLineNumber = numberOfLines;
+        }
+        do {
+            fontSize -= 1;
+            if (fontSize < minFontSize) {
+                fontSize = minFontSize;
+                break;
+            }
+            textWidth = canvasHelper.textWidth(ctx, longerLabel, fontSize, getComputedStyle(this).fontFamily);
+        } while (textWidth * widthScale > this.lineLength * numberOfLines);
+        return fontSize;
+    }
+    /**
+     * Update label font size
+     * @returns {void}
+     */
+    calculateLabelFontSize() {
+        if (!this.canvas.ctx) {
+            return;
+        }
+        this.labelStyle = { maxWidth: `${this.lineLength}px`, fontSize: `${this.calculateFontSize(this.canvas.ctx, TextType.LABEL)}px` };
+    }
+    /**
+     * Update value font size
+     * @returns {void}
+     */
+    calculateValueFontSize() {
+        if (!this.canvas.ctx) {
+            return;
+        }
+        this.valueStyle = { maxWidth: `${this.lineLength}px`, fontSize: `${this.calculateFontSize(this.canvas.ctx, TextType.VALUE)}px` };
+    }
+    /**
+     * Compute percentage of value
+     * @param value value of primary or secondary
+     * @returns percentage of value
+     */
+    getPercentage(value) {
+        if (value === 0) {
+            return 0;
+        }
+        return 100 * value / (this.primaryValue + this.secondaryValue);
+    }
+    /**
+     * Handles canvas resize
+     * @returns {void}
+     */
+    onCanvasResize() {
+        this.calculateCanvasSize();
+        this.updateFontSize();
+        this.renderCanvas('resize');
+        this.updateGaugePositions();
+    }
+    /**
+     * Renders legend container
+     * @returns {TemplateResult} Legend template or null
+     */
+    get legendTemplate() {
+        return this.primaryLegend.length > 0 || this.secondaryLegend.length > 0
+            ? html `<div part="legend-container-outer">
+              <div part="legend-container-inner">
+                ${this.primaryLegendTemplate}
+                ${this.secondaryLegendTemplate}
+              </div>
+            </div>`
+            : null;
+    }
+    /**
+     * Renders primary legend if property present
+     * @returns {TemplateResult} Primary legend template or null
+     */
+    get primaryLegendTemplate() {
+        return this.primaryLegend
+            ? html `<div part="primary-legend">
+              <span part="primary-legend-symbol"></span>
+              <ef-label max-line="${MAX_LEGEND_LINE}" line-clamp="${MAX_LEGEND_LINE}">${this.primaryLegend}</ef-label>
+            </div>`
+            : null;
+    }
+    /**
+     * Renders secondary legend if property present
+     * @returns {TemplateResult} Secondary legend template or null
+     */
+    get secondaryLegendTemplate() {
+        return this.secondaryLegend
+            ? html `<div part="secondary-legend">
+              <span part="secondary-legend-symbol"></span>
+              <ef-label max-line="${MAX_LEGEND_LINE}" line-clamp="${MAX_LEGEND_LINE}">${this.secondaryLegend}</ef-label>
+            </div>`
+            : null;
+    }
+    render() {
+        return html `
+      <div part="container">
+        ${this.legendTemplate}
+        <div part="canvas-container">
+          <ef-canvas part="canvas" @resize=${this.onCanvasResize}></ef-canvas>
+          <div part="primary-container" style=${styleMap(this.primaryContainerStyle)}>
+            ${this.primaryLabel ? html `
+              <ef-label
+                part="primary-label"
+                max-line="${MAX_LABEL_LINE}"
+                line-clamp="${MAX_LABEL_LINE}"
+                style=${styleMap(this.labelStyle)}
+                >${this.primaryLabel}
+              </ef-label><br>`
+            : null}
+            <ef-label
+              part="primary-value"
+              truncate=""
+              line-clamp="1"
+              style=${styleMap(this.valueStyle)}
+              >${this.valueFormatter(this.primaryPercentage, this.primaryValue)}</ef-label
+            >
+          </div>
+          <div part="secondary-container" style=${styleMap(this.secondaryContainerStyle)}>
+            ${this.secondaryLabel ? html `
+              <ef-label
+                part="secondary-label"
+                max-line="${MAX_LABEL_LINE}"
+                line-clamp="${MAX_LABEL_LINE}"
+                style=${styleMap(this.labelStyle)}
+                >${this.secondaryLabel}
+              </ef-label><br>`
+            : null}
+            <ef-label
+              part="secondary-value"
+              truncate=""
+              line-clamp="1"
+              style=${styleMap(this.valueStyle)}
+              >${this.valueFormatter(this.secondaryPercentage, this.secondaryValue)}</ef-label
+            >
+          </div>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ attribute: 'primary-value', type: Number })
+], SwingGauge.prototype, "primaryValue", null);
+__decorate([
+    property({ attribute: 'primary-label', type: String })
+], SwingGauge.prototype, "primaryLabel", void 0);
+__decorate([
+    property({ attribute: 'secondary-value', type: Number })
+], SwingGauge.prototype, "secondaryValue", null);
+__decorate([
+    property({ attribute: 'secondary-label', type: String })
+], SwingGauge.prototype, "secondaryLabel", void 0);
+__decorate([
+    property({ type: Number })
+], SwingGauge.prototype, "duration", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'primary-legend' })
+], SwingGauge.prototype, "primaryLegend", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'secondary-legend' })
+], SwingGauge.prototype, "secondaryLegend", void 0);
+__decorate([
+    property({ type: Function, attribute: false })
+], SwingGauge.prototype, "valueFormatter", void 0);
+__decorate([
+    state()
+], SwingGauge.prototype, "primaryContainerStyle", void 0);
+__decorate([
+    state()
+], SwingGauge.prototype, "secondaryContainerStyle", void 0);
+__decorate([
+    state()
+], SwingGauge.prototype, "labelStyle", void 0);
+__decorate([
+    state()
+], SwingGauge.prototype, "valueStyle", void 0);
+__decorate([
+    query('[part=primary-container]', true)
+], SwingGauge.prototype, "primaryContainer", void 0);
+__decorate([
+    query('[part=secondary-container]', true)
+], SwingGauge.prototype, "secondaryContainer", void 0);
+__decorate([
+    query('[part=legend-container-outer]')
+], SwingGauge.prototype, "legendContainer", void 0);
+__decorate([
+    query('[part=canvas]', true)
+], SwingGauge.prototype, "canvas", void 0);
+SwingGauge = __decorate([
+    customElement('ef-swing-gauge', {
+        alias: 'sapphire-swing-gauge'
+    })
+], SwingGauge);
+export { SwingGauge };