@refinitiv-ui/elements 5.2.1 → 5.3.0

package/lib/swing-gauge/index.js

@@ -4,55 +4,116 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { css, customElement, property } from '@refinitiv-ui/core';
-import { helpers as canvasHelper } from './helpers/canvas';
-import { Canvas } from '../canvas';
+import { ResponsiveElement, css, customElement, property, html, styleMap, query, state, WarningNotice } from '@refinitiv-ui/core';
 import { VERSION } from '../';
+import '../canvas';
+import '../label';
+import { helpers as canvasHelper } from './helpers';
+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;
+// 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 Canvas {
+let SwingGauge = class SwingGauge extends ResponsiveElement {
     constructor() {
-        super();
+        super(...arguments);
+        this._primaryValue = 0;
         /**
-         * Set the primary value
-         * @default 50
+         * Primary label
          */
-        this.primaryValue = 50;
+        this.primaryLabel = '';
+        this._secondaryValue = 0;
         /**
-         * Set the primary label
+         * Secondary label
          */
-        this.primaryLabel = '';
+        this.secondaryLabel = '';
         /**
-         * Set the secondary value
-         * @default 50
+         * Animation duration in milliseconds
          */
-        this.secondaryValue = 50;
+        this.duration = 1000;
         /**
-         * Set the secondary label
+        * Primary value legend
+        */
+        this.primaryLegend = '';
+        /**
+        * Secondary value legend
+        */
+        this.secondaryLegend = '';
+        /**
+         * Custome value formatter
          */
-        this.secondaryLabel = '';
+        this.valueFormatter = this.defaultValueFormatter;
         /**
-         * Sets the animation duration in milliseconds
-         * @default 1000
+         * Controls swing gauge animations
          */
-        this.duration = 1000;
-        this.w = null;
-        this.h = null;
-        this.min = null;
-        this.max = null;
-        this.size = null;
-        this.maxFontSize = null;
-        this.centerlineOptions = ['solid', 'dotted', 'dashed'];
         this.onFrame = requestAnimationFrame.bind(window);
         this.cancelFrame = cancelAnimationFrame.bind(window);
-        this.previousFillPercentage = null;
-        this.fillPercentage = null;
-        this.frameHandler = null;
+        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;
+        this.linePointerOffsetOverflow = LINE_POINTER_OFFSET;
+        /**
+        * Data requires to draw swing gauge
+        */
+        this.data = null;
         /**
-         * @ignore
+        * Internal sizes and scales
+        */
+        this.width = 0;
+        this.height = 0;
+        this.size = 0;
+        this.lineLength = 50;
+        this.scale = 1;
+        this.overflowScale = 0.1;
+        /**
+        * Current fill percentage
+        */
+        this.fillPercentage = 0;
+        /**
+        * Keeps previous percentage calculation to avoid re-rendering the same value
+        */
+        this.previousFillPercentage = 0;
+        /**
+         * Style for primary container
          */
-        this.autoloop = true;
+        this.primaryContainerStyle = {};
+        /**
+         * Style for secondary container
+         */
+        this.secondaryContainerStyle = {};
+        /**
+         * Style for label
+         */
+        this.labelStyle = {};
+        /**
+         * Style for both values
+         */
+        this.valueStyle = {};
     }
     /**
      * Element version number
@@ -71,220 +132,649 @@ let SwingGauge = class SwingGauge extends Canvas {
         return css `
       :host {
         display: block;
-        overflow: hidden;
+        height: 200px;
+      }
+      :host [part=container] {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+      :host [part=canvas-container] {
         position: relative;
+        flex: 1;
       }
-      :host::before {
-        content: '';
-        display: block;
-        min-height: 200px;
-        box-sizing: border-box;
+      :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;
       }
-      canvas {
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
+      :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;
+            void 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;
+            void 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
-     * @returns {ElementSize} return size of component
+     * @returns return size of canvas
      */
     get canvasSize() {
         return {
-            width: this.width,
-            height: this.height
+            width: this.offsetWidth,
+            height: this.offsetHeight
         };
     }
     /**
-     * Re-draw canvas when the size of component changed
-     * @ignore
-     * @param size element dimensions
+     * 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}
      */
-    resizedCallback(size) {
-        super.resizedCallback(size);
-        this.renderCanvas();
+    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 event frame fired to re-draw canvas
-     * @protected
-     * @param time timestamp
+     * Handles when component disconnected
      * @returns {void}
      */
-    fireFrame(time) {
-        super.fireFrame(time);
-        this.renderCanvas(true);
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.requestedAnimationID) {
+            this.cancelFrame(this.requestedAnimationID);
+        }
     }
     /**
-     * On First Updated Lifecycle
-     * @ignore
-     * @param changedProperties changed properties
+     * Calls easing based on both left and right values
+     * @param primaryValue primary value
+     * @param secondaryValue secondary value
      * @returns {void}
      */
-    firstUpdated(changedProperties) {
-        super.firstUpdated(changedProperties);
-        this.reDrawCanvas();
+    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);
     }
     /**
-     * On Update Lifecycle
-     * @ignore
-     * @param changedProperties changed properties
+     * Eases the fill percentage
+     * @param to ease to value
+     * @param from ease from value
+     * @param time ease time
      * @returns {void}
      */
-    update(changedProperties) {
-        super.update(changedProperties);
+    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);
     }
     /**
-     * On Updated Lifecycle
-     * @ignore
-     * @param changedProperties changed properties
+     * Restart the animation, re-render the canvas
      * @returns {void}
      */
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        this.reDrawCanvas();
+    animateCanvas() {
+        this.ease(this.primaryValue, this.secondaryValue);
     }
     /**
-     * Handles when component disconnected
-     * @private
+     * Render chart
+     * @param onDraw drawing type
+     * @param isFrameUpdated Optional called by on frame event
      * @returns {void}
      */
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        if (this.frameHandler) {
-            this.cancelFrame(this.frameHandler);
-            this.frameHandler = null;
+    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;
     }
     /**
-     * Calls easing based on both left and right values
-     * @private
-     * @param {number} v1 left value
-     * @param {number} v2 right value
+     * Get computed swing-gauge data for drawing
+     * @returns swing-gauge data
+     */
+    getData() {
+        let primaryPosLine = this.getPositionStyle(Segment.PRIMARY, this.primaryLineRadian, this.linePointerOffset, 0);
+        const primaryPosPoint = this.getPositionStyle(Segment.PRIMARY, PRIMARY_RADIAN, this.pointPointerOffset, 0);
+        let secondaryPosLine = this.getPositionStyle(Segment.SECONDARY, this.secondaryLineRadian, this.linePointerOffset, 0);
+        const secondaryPosPoint = this.getPositionStyle(Segment.SECONDARY, SECONDARY_RADIAN, this.pointPointerOffset, 0);
+        // Recalculate radian to prevent container overflow
+        let primaryHeight = 0;
+        if (this.primaryContainer.children[0]) {
+            primaryHeight += this.primaryContainer.children[0].offsetHeight;
+        }
+        if (this.primaryContainer.children[1]) {
+            primaryHeight += this.primaryContainer.children[1].offsetHeight;
+        }
+        const primarySpace = this.height - this.getValueFromStyle(primaryPosLine.top);
+        const primaryOverflow = primarySpace < primaryHeight && this.primaryPercentage >= GAUGE_PERCENTAGE_THRESHOLD && primarySpace > 0 && primaryHeight > 0;
+        let secondaryHeight = 0;
+        if (this.secondaryContainer.children[0]) {
+            secondaryHeight += this.secondaryContainer.children[0].offsetHeight;
+        }
+        if (this.secondaryContainer.children[1]) {
+            secondaryHeight += this.secondaryContainer.children[1].offsetHeight;
+        }
+        const secondarySpace = this.height - this.getValueFromStyle(secondaryPosLine.top);
+        const secondaryOverflow = secondarySpace < secondaryHeight && this.secondaryPercentage >= GAUGE_PERCENTAGE_THRESHOLD && secondarySpace > 0 && secondaryHeight > 0;
+        if (primaryOverflow || secondaryOverflow) {
+            let containerHeight = primaryHeight;
+            let containerHeightOverflow = primarySpace;
+            let containerWidth = (this.width / 2) - this.getValueFromStyle(primaryPosLine.left);
+            if ((!primaryOverflow && secondaryOverflow)
+                || (primaryOverflow && secondaryOverflow && secondaryHeight > primaryHeight)) {
+                containerHeight = secondaryHeight;
+                containerHeightOverflow = secondarySpace;
+                containerWidth = this.getValueFromStyle(secondaryPosLine.left) - (this.width / 2);
+            }
+            // Prevents container overflow
+            const oldRadius = Math.sqrt(Math.pow(containerHeightOverflow, 2) + Math.pow(containerWidth, 2));
+            const newRadius = Math.sqrt(Math.pow(containerHeight, 2) + Math.pow(containerWidth, 2));
+            this.linePointerOffset *= Math.pow(2, newRadius / oldRadius);
+            this.linePointerOffset = this.linePointerOffset > 4 ? 4 : this.linePointerOffset;
+            this.linePointerOffsetOverflow = this.linePointerOffset;
+            this.overflowScale = this.scale;
+            primaryPosLine = this.getPositionStyle(Segment.PRIMARY, this.primaryLineRadian, this.linePointerOffset, 0);
+            secondaryPosLine = this.getPositionStyle(Segment.SECONDARY, this.secondaryLineRadian, this.linePointerOffset, 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 === null || styleValue === void 0 ? void 0 : styleValue.replace('px', ''));
+    }
+    /**
+     * Compute and update style of containers and labels
      * @returns {void}
      */
-    ease(v1, v2) {
-        if (v1 || v2) {
-            this.easeTo(v1 / (v1 + v2), this.fillPercentage, performance.now() + this.duration);
+    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 = Object.assign({ width: `${this.lineLength}px` }, primaryPosition);
+        this.secondaryContainerStyle = Object.assign({ width: `${this.lineLength}px` }, secondaryPosition);
+        // position container over line pointer
+        if (this.primaryPercentage < GAUGE_PERCENTAGE_THRESHOLD) {
+            delete this.primaryContainerStyle.top;
+            this.primaryContainerStyle.bottom = '5px';
         }
-        else if (typeof this.fillPercentage === 'number') {
-            this.easeTo(0.5, this.fillPercentage, performance.now() + this.duration);
+        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 {
-            this.fillPercentage = 0.5;
+            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 };
     }
     /**
-     * Eases the fill percentage
-     * @private
-     * @param {number} to ease to value
-     * @param {number} from ease from value
-     * @param {number} time ease time
+     * Scales canvas variables making it responsive before painting
      * @returns {void}
      */
-    easeTo(to, from, time) {
-        let diff = this.duration - (time - performance.now());
-        diff /= this.duration;
-        this.fillPercentage = (from + (to - from) * canvasHelper.elasticOut(diff > 1 ? 1 : diff < 0 ? 0 : diff)) || 0;
-        if (this.fillPercentage !== to) {
-            if (this.frameHandler) {
-                this.cancelFrame(this.frameHandler);
+    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 < 50 ? 50 : 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) {
+            const offset = 0.05 * (1 - this.scale);
+            this.primaryLineRadian = PRIMARY_RADIAN + offset;
+            this.secondaryLineRadian = SECONDARY_RADIAN - offset;
+            this.linePointerOffset = LINE_POINTER_OFFSET + (0.4 * (1 - this.scale));
+            if (this.scale <= this.overflowScale) {
+                this.linePointerOffset = this.linePointerOffsetOverflow;
             }
-            this.frameHandler = this.onFrame(() => this.easeTo(to, from, time));
         }
+        this.primaryLineRadian = this.primaryLineRadian > 1.3 ? 1.3 : this.primaryLineRadian;
+        this.secondaryLineRadian = this.primaryLineRadian > 1.7 ? 1.7 : this.secondaryLineRadian;
     }
     /**
-     * Does the control has valid data?
-     * @returns {boolean} will return true if valid data
+     * Calculate and update font sizes on canvas
+     * @returns {void}
      */
-    dataValid() {
-        return this.primaryValue >= 0 && this.secondaryValue >= 0;
+    updateFontSize() {
+        this.calculateLabelFontSize();
+        this.calculateValueFontSize();
     }
     /**
-     * Are we able to render?
-     * Used to prevent frame painting if data hasn't changed
-     * @returns {boolean} will return true if canvas can render
+     * Calculate label or value font size
+     * @param ctx canvas context
+     * @param textType text type
+     * @returns {number} font size
      */
-    canRender() {
-        return (this.canvas.width + this.canvas.height !== 0 && this.previousFillPercentage !== this.fillPercentage);
+    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;
+        }
+        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;
     }
     /**
-     * Calculate fill percentage and re-render chart
+     * Update label font size
      * @returns {void}
      */
-    reDrawCanvas() {
-        this.ease(this.primaryValue, this.secondaryValue);
-        this.renderCanvas();
+    calculateLabelFontSize() {
+        if (!this.canvas.ctx) {
+            return;
+        }
+        this.labelStyle = { maxWidth: `${this.lineLength}px`, fontSize: `${this.calculateFontSize(this.canvas.ctx, TextType.LABEL)}px` };
     }
     /**
-     * Render chart
-     * @param isFrameUpdated Optional called by on frame event
+     * Update value font size
      * @returns {void}
      */
-    renderCanvas(isFrameUpdated) {
-        // Can and should we paint?
-        if ((isFrameUpdated && !this.canRender()) || !this.dataValid()) {
+    calculateValueFontSize() {
+        if (!this.canvas.ctx) {
             return;
         }
-        // Update the variables
-        this.w = this.canvasSize.width;
-        this.h = this.canvasSize.height;
-        this.min = this.w > this.h ? this.h : this.w;
-        this.max = this.w > this.h ? this.w : this.h;
-        this.size = Math.floor(this.max / 2 < this.min ? this.max / 2 : this.min);
-        this.maxFontSize = Math.round(this.size * 0.18);
-        // Clear
-        canvasHelper.clear(this.canvasSize, this.ctx);
-        // Draw
-        canvasHelper.draw({
-            w: this.w,
-            h: this.h,
-            size: this.size,
-            duration: this.duration,
-            primaryValue: this.primaryValue,
-            primaryLabel: this.primaryLabel,
-            secondaryValue: this.secondaryValue,
-            secondaryLabel: this.secondaryLabel,
-            fillPercentage: this.fillPercentage
-        }, this.ctx, this.canvasSize, {
-            ctxOptions: {
-                strokeWidth: Math.ceil(this.size * 0.005),
-                fontSize: this.maxFontSize,
-                fontFamily: getComputedStyle(this).fontFamily,
-                fillStyle: this.getComputedVariable('--text-color', '#fff'),
-                maxFontSize: Math.round(this.size * 0.18),
-                primaryColor: this.getComputedVariable('--primary-color', '#2EB4C9'),
-                secondaryColor: this.getComputedVariable('--secondary-color', '#C93C4B'),
-                borderColor: this.getComputedVariable('--border-color', '#000'),
-                centerline: `${this.getComputedVariable('--center-line', 'solid')}`.trim(),
-                centerlineOpacity: this.getComputedVariable('--center-line-opacity', '0.6'),
-                centerlineColor: this.getComputedVariable('--center-line-color', '#000'),
-                centerlineOptions: this.centerlineOptions
-            }
-        });
-        // Set this for comparison when deciding if we should paint
-        this.previousFillPercentage = this.fillPercentage;
+        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", void 0);
+], 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", void 0);
+], 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'