@sme.up/ketchup 8.0.2 → 8.1.0

package/dist/collection/components/kup-gauge/kup-gauge.js

@@ -1,764 +1,764 @@
-import { forceUpdate, h, Host, } from '@stencil/core';
-import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';
-import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
-import { getProps, setProps } from '../../utils/utils';
-import { KupGaugeProps } from './kup-gauge-declarations';
-import { arc } from 'd3-shape';
-import { KupThemeColorValues } from '../../managers/kup-theme/kup-theme-declarations';
-import { componentWrapperId } from '../../variables/GenericVariables';
-export class KupGauge {
-  constructor() {
-    /*-------------------------------------------------*/
-    /*       I n t e r n a l   V a r i a b l e s       */
-    /*-------------------------------------------------*/
-    /**
-     * Instance of the KupManager class.
-     */
-    this.kupManager = kupManagerInstance();
-    // Arcs generator
-    this.arcGenerator = arc();
-    /**
-     * Holds the maximum positive interval.
-     * Percentages are calculated as it follows:
-     * MIN = 0 = the value the prop minValue gets transformed to\
-     * MAX = ABSOLUTE(minValue - maxValue) = the maxValuePositive holds this value
-     * TVALUE = value - minValue = any value, which needs to be represented on the chart
-     * @namespace kup-gauge.maxValuePositive
-     */
-    this.maxValuePositive = 0;
-    this.arcThickness = 30;
-    this.colors = [
-      `var(${KupThemeColorValues.SUCCESS})`,
-      `var(${KupThemeColorValues.WARNING})`,
-      `var(${KupThemeColorValues.DANGER})`,
-    ];
-    this.customStyle = '';
-    this.firstThreshold = undefined;
-    this.labelDistance = 20;
-    this.maxValue = 100;
-    this.measurementUnit = '';
-    this.minValue = -100;
-    this.needleCircle = false;
-    this.onlyValue = false;
-    this.reverseColors = false;
-    this.secondThreshold = undefined;
-    this.showLabels = true;
-    this.showMaxmin = true;
-    this.showValue = true;
-    this.size = 300;
-    this.value = 0;
-    this.valueSize = 0;
-    this.widthComponent = '100%';
-  }
-  /*-------------------------------------------------*/
-  /*           P u b l i c   M e t h o d s           */
-  /*-------------------------------------------------*/
-  /**
-   * Used to retrieve component's props values.
-   * @param {boolean} descriptions - When provided and true, the result will be the list of props with their description.
-   * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
-   */
-  async getProps(descriptions) {
-    return getProps(this, KupGaugeProps, descriptions);
-  }
-  /**
-   * This method is used to trigger a new render of the component.
-   */
-  async refresh() {
-    forceUpdate(this);
-  }
-  /**
-   * Sets the props to the component.
-   * @param {GenericObject} props - Object containing props that will be set to the component.
-   */
-  async setProps(props) {
-    setProps(this, KupGaugeProps, props);
-  }
-  /*-------------------------------------------------*/
-  /*           P r i v a t e   M e t h o d s         */
-  /*-------------------------------------------------*/
-  percToDeg(perc) {
-    return perc * 360;
-  }
-  degToRad(deg) {
-    return (deg * Math.PI) / 180;
-  }
-  percToRad(perc) {
-    return this.degToRad(this.percToDeg(perc));
-  }
-  /**
-   * Given a valid value, minValue <= value <= maxValue, calculates this value as a percentage of the interval [minValue, maxValue]
-   * @param {number} valueToPercentage - The value to be calculated as a percentage
-   * @see kup-gauge.maxValuePositive
-   */
-  calculateValuePercentage(valueToPercentage = 0) {
-    return (valueToPercentage - this.minValue) / this.maxValuePositive;
-  }
-  calculateValueFontSize() {
-    switch (this.valueSize) {
-      case 3:
-        return '350%';
-      case 2:
-        return '325%';
-      case 1:
-        return '300%';
-      default:
-      case 0:
-        return '275%';
-    }
-  }
-  //---- Rendering functions ----
-  /**
-   * Provided all the necessary data, returns the string necessary for a <path/> element to build the gauge needle.
-   * @param needleLength - A pure number of viewbox units indicating the needle lenght.
-   * @param needleBaseRadius - Sets the needle radius in viewbox units.
-   * @param centerX - X coordinate of the center of the base needle.
-   * @param centerY - Y coordinate of the center of the base needle.
-   * @param rotationPercentage {number} - A percentage number setting the current rotation of the needle. (0 < rotationPercentage < 1)
-   * @returns {string}
-   */
-  paintNeedle(needleLength, needleBaseRadius, centerX, centerY, rotationPercentage = 0) {
-    let leftX, leftY, rightX, rightY, thetaRad, topX, topY;
-    thetaRad = this.percToRad(rotationPercentage / 2); // Since the gauge is a semicircle, we must divide the percentage in half to have the correct angle
-    topX = centerX - needleLength * Math.cos(thetaRad);
-    topY = centerY - needleLength * Math.sin(thetaRad);
-    leftX = centerX - needleBaseRadius * Math.cos(thetaRad - Math.PI / 2);
-    leftY = centerY - needleBaseRadius * Math.sin(thetaRad - Math.PI / 2);
-    rightX = centerX - needleBaseRadius * Math.cos(thetaRad + Math.PI / 2);
-    rightY = centerY - needleBaseRadius * Math.sin(thetaRad + Math.PI / 2);
-    return ('M ' +
-      leftX +
-      ' ' +
-      leftY +
-      ' L ' +
-      topX +
-      ' ' +
-      topY +
-      ' L ' +
-      rightX +
-      ' ' +
-      rightY);
-  }
-  /*-------------------------------------------------*/
-  /*          L i f e c y c l e   H o o k s          */
-  /*-------------------------------------------------*/
-  componentWillLoad() {
-    this.kupManager.debug.logLoad(this, false);
-    this.kupManager.theme.register(this);
-  }
-  componentDidLoad() {
-    this.kupManager.debug.logLoad(this, true);
-  }
-  componentWillRender() {
-    this.kupManager.debug.logRender(this, false);
-    if (!this.labelDistance) {
-      this.labelDistance = 20;
-    }
-    if (this.maxValue === undefined || this.maxValue === null) {
-      this.maxValue = 100;
-    }
-    if (this.minValue === undefined || this.minValue === null) {
-      this.minValue = -100;
-    }
-  }
-  componentDidRender() {
-    this.kupManager.debug.logRender(this, true);
-  }
-  render() {
-    if (isNaN(this.value)) {
-      this.kupManager.debug.logMessage(this, 'Invalid value, not rendering!', KupDebugCategory.WARNING);
-      return;
-    }
-    // mathematical operations
-    this.maxValuePositive = Math.abs(this.minValue - this.maxValue);
-    let tempValue = this.value;
-    if (this.value > this.maxValue) {
-      this.value = this.maxValue;
-    }
-    if (this.value < this.minValue) {
-      this.value = this.minValue;
-    }
-    // Svg constants
-    let yValueMultiplier = 1;
-    switch (this.valueSize) {
-      case 3:
-        yValueMultiplier = 3;
-        break;
-      case 2:
-        yValueMultiplier = 2.75;
-        break;
-      case 1:
-        yValueMultiplier = 2.5;
-        break;
-      default:
-      case 0:
-        yValueMultiplier = 2.25;
-        break;
-    }
-    const halvedSize = this.size / 2; // The svg size ratio w : w / 2
-    const needleCircleRadius = this.size / 20; // Arbitrary size of the base of the needle
-    const needleLength = halvedSize - 2 * this.arcThickness; // Calculates the length of the needle in pure units
-    const valueLabelYPosition = halvedSize +
-      needleCircleRadius +
-      this.labelDistance * yValueMultiplier;
-    // User provided thresholds
-    // TODO these thresholds will be given to the component by a user prop
-    const givenThresholds = [];
-    if (!this.onlyValue) {
-      if (this.firstThreshold || 0 === this.firstThreshold) {
-        givenThresholds.push(this.firstThreshold);
-      }
-      if (this.secondThreshold || 0 === this.secondThreshold) {
-        givenThresholds.push(this.secondThreshold);
-      }
-    }
-    else {
-      givenThresholds.push(this.value);
-    }
-    // This creates the various point from which the arcs are generated
-    const arcsThresholds = [
-      this.minValue,
-      ...givenThresholds,
-      this.maxValue,
-    ];
-    // Creates arc elements and chooses their color orders
-    const arcsElements = [];
-    let arcsColors;
-    if (!this.onlyValue) {
-      arcsColors = !this.reverseColors
-        ? this.colors
-        : this.colors.slice().reverse();
-    }
-    else {
-      let computedcolors = !this.reverseColors
-        ? this.colors
-        : this.colors.slice().reverse();
-      let valuecolor = this.value < this.firstThreshold
-        ? computedcolors[0]
-        : this.value < this.secondThreshold
-          ? computedcolors[1]
-          : computedcolors[2];
-      arcsColors = [
-        valuecolor,
-        `rgba(var(${KupThemeColorValues.TEXT}-rgb), .1)`,
-      ];
-    }
-    for (let i = 0; i < arcsThresholds.length - 1; i++) {
-      const currentArcPath = this.arcGenerator({
-        innerRadius: halvedSize - this.arcThickness,
-        outerRadius: halvedSize,
-        startAngle: this.calculateValuePercentage(arcsThresholds[i]) * Math.PI,
-        endAngle: this.calculateValuePercentage(arcsThresholds[i + 1]) *
-          Math.PI,
-      });
-      // If there is no color specified for that arc, we provide a black fallback
-      arcsElements.push(h("path", { d: currentArcPath, style: { fill: arcsColors[i] ? arcsColors[i] : '#000000' } }));
-    }
-    // Composes the threshold label elements, if labels must be displayed
-    const textElements = this.showLabels || this.showMaxmin
-      ? arcsThresholds.map((threshold) => {
-        // Given the
-        const thresholdPercentage = this.calculateValuePercentage(threshold);
-        // Decides the position of the text
-        // @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor
-        let textPosition = 'end';
-        if (thresholdPercentage > 0.5) {
-          textPosition = 'start';
-        }
-        else if (thresholdPercentage === 0.5) {
-          textPosition = 'middle';
-        }
-        // Since the gauge is a semicircle, we must divide the percentage in half to have the correct angle
-        const thetaRad = this.percToRad(thresholdPercentage / 2);
-        let topX = halvedSize - (needleLength + 2) * Math.cos(thetaRad);
-        let topY = halvedSize - (needleLength + 2) * Math.sin(thetaRad);
-        let retValue = '';
-        if (thresholdPercentage > 0 && thresholdPercentage < 1) {
-          if (this.showLabels && !this.onlyValue) {
-            retValue = (h("text", { class: "gauge__label-text", "text-anchor": textPosition, x: topX, y: topY }, this.kupManager.math.numberStringToFormattedString(String(threshold), -1, '')));
-          }
-        }
-        else {
-          if (this.showMaxmin) {
-            if (thresholdPercentage === 0) {
-              topX = this.arcThickness;
-              topY = halvedSize + this.labelDistance;
-            }
-            else {
-              topX = this.size - this.arcThickness;
-              topY = halvedSize + this.labelDistance;
-            }
-            retValue = (h("text", { class: "gauge__label-text", "text-anchor": textPosition, x: topX, y: topY }, this.kupManager.math.numberStringToFormattedString(String(threshold), -1, '')));
-          }
-        }
-        return retValue;
-      })
-      : [];
-    const style = { fontSize: this.calculateValueFontSize() };
-    let valueText = undefined;
-    if (this.showValue) {
-      valueText = (h("text", { class: "gauge__label-text value", "text-anchor": "middle", x: halvedSize, y: valueLabelYPosition, style: style }, this.kupManager.math.numberStringToFormattedString(String(tempValue), -1, '') +
-        ' ' +
-        this.measurementUnit));
-    }
-    const width = { width: this.widthComponent };
-    return (h(Host, null, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId, class: "gauge__container" }, h("svg", { class: "gauge", style: width, viewBox: `0 0 ${this.size} ${valueLabelYPosition}` }, h("g", { transform: `rotate(-90) translate(-${halvedSize}, ${halvedSize})` }, arcsElements), this.needleCircle ? (h("circle", { class: "gauge__needle-base", cx: halvedSize, cy: halvedSize, r: needleCircleRadius })) : null, h("path", { class: "gauge__needle", d: this.paintNeedle(needleLength, needleCircleRadius, halvedSize, halvedSize, this.calculateValuePercentage(this.value)) }), textElements, valueText))));
-  }
-  disconnectedCallback() {
-    this.kupManager.theme.unregister(this);
-  }
-  static get is() { return "kup-gauge"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["kup-gauge.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["kup-gauge.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "arcThickness": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "namespace",
-              "text": "kup-gauge.arcThickness"
-            }, {
-              "name": "see",
-              "text": "kup-gauge.size"
-            }],
-          "text": "Sets how much the arc of the gauge should be thick."
-        },
-        "attribute": "arc-thickness",
-        "reflect": false,
-        "defaultValue": "30"
-      },
-      "colors": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "string[]",
-          "resolved": "string[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Array of three elements to specify the color of the arcs."
-        },
-        "defaultValue": "[\r\n        `var(${KupThemeColorValues.SUCCESS})`,\r\n        `var(${KupThemeColorValues.WARNING})`,\r\n        `var(${KupThemeColorValues.DANGER})`,\r\n    ]"
-      },
-      "customStyle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "\"\""
-            }, {
-              "name": "see",
-              "text": "https://ketchup.smeup.com/ketchup-showcase/#/customization"
-            }],
-          "text": "Custom style of the component."
-        },
-        "attribute": "custom-style",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "firstThreshold": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The first threshold, establishing the length of the first and second arc."
-        },
-        "attribute": "first-threshold",
-        "reflect": false
-      },
-      "labelDistance": {
-        "type": "number",
-        "mutable": true,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The distance the label and the value has from the gauge graph."
-        },
-        "attribute": "label-distance",
-        "reflect": false,
-        "defaultValue": "20"
-      },
-      "maxValue": {
-        "type": "number",
-        "mutable": true,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The maximum value reachable in the current graph."
-        },
-        "attribute": "max-value",
-        "reflect": false,
-        "defaultValue": "100"
-      },
-      "measurementUnit": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "A string which will be appended to the displayed values of the component."
-        },
-        "attribute": "measurement-unit",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "minValue": {
-        "type": "number",
-        "mutable": true,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The minimum value reachable in the current graph."
-        },
-        "attribute": "min-value",
-        "reflect": false,
-        "defaultValue": "-100"
-      },
-      "needleCircle": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "When true, shows a rounded needle."
-        },
-        "attribute": "needle-circle",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "onlyValue": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "When true, ignore thresholds in gauge and show colored value's arc."
-        },
-        "attribute": "only-value",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "reverseColors": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "When true, the colors inside the colors array are used in the reversed order."
-        },
-        "attribute": "reverse-colors",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "secondThreshold": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The second threshold, establishing the length of the second and third arc."
-        },
-        "attribute": "second-threshold",
-        "reflect": false
-      },
-      "showLabels": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If set to false, threshold values of the gauge are not displayed."
-        },
-        "attribute": "show-labels",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "showMaxmin": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If set to false, the maximum and minimum values of the gauge are not displayed."
-        },
-        "attribute": "show-maxmin",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "showValue": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If set to false, the current value of the gauge is not displayed."
-        },
-        "attribute": "show-value",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "size": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "namespace",
-              "text": "kup-gauge.size"
-            }, {
-              "name": "see",
-              "text": "kup-gauge.arcThickness"
-            }],
-          "text": "Con be used change the viewbox of the SVG.\r\nBy manipulating this value, some customizations of the aspect of the gauge is achievable."
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "300"
-      },
-      "value": {
-        "type": "number",
-        "mutable": true,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The current value of the gauge.\r\nThe gauge's needle points to the percentage based on this prop."
-        },
-        "attribute": "value",
-        "reflect": false,
-        "defaultValue": "0"
-      },
-      "valueSize": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The current size of gauge's value.\r\nCorrect values are: 0,1,2 or 3."
-        },
-        "attribute": "value-size",
-        "reflect": false,
-        "defaultValue": "0"
-      },
-      "widthComponent": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set Width gauge."
-        },
-        "attribute": "width-component",
-        "reflect": false,
-        "defaultValue": "'100%'"
-      }
-    };
-  }
-  static get methods() {
-    return {
-      "getProps": {
-        "complexType": {
-          "signature": "(descriptions?: boolean) => Promise<GenericObject>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "descriptions - When provided and true, the result will be the list of props with their description."
-                }],
-              "text": "- When provided and true, the result will be the list of props with their description."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "GenericObject": {
-              "location": "import",
-              "path": "../../types/GenericTypes"
-            }
-          },
-          "return": "Promise<GenericObject>"
-        },
-        "docs": {
-          "text": "Used to retrieve component's props values.",
-          "tags": [{
-              "name": "param",
-              "text": "descriptions - When provided and true, the result will be the list of props with their description."
-            }, {
-              "name": "returns",
-              "text": "List of props as object, each key will be a prop."
-            }]
-        }
-      },
-      "refresh": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "This method is used to trigger a new render of the component.",
-          "tags": []
-        }
-      },
-      "setProps": {
-        "complexType": {
-          "signature": "(props: GenericObject) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "props - Object containing props that will be set to the component."
-                }],
-              "text": "- Object containing props that will be set to the component."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "GenericObject": {
-              "location": "import",
-              "path": "../../types/GenericTypes"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets the props to the component.",
-          "tags": [{
-              "name": "param",
-              "text": "props - Object containing props that will be set to the component."
-            }]
-        }
-      }
-    };
-  }
-  static get elementRef() { return "rootElement"; }
-}
+import { forceUpdate, h, Host, } from '@stencil/core';
+import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
+import { getProps, setProps } from '../../utils/utils';
+import { KupGaugeProps } from './kup-gauge-declarations';
+import { arc } from 'd3-shape';
+import { KupThemeColorValues } from '../../managers/kup-theme/kup-theme-declarations';
+import { componentWrapperId } from '../../variables/GenericVariables';
+export class KupGauge {
+  constructor() {
+    /*-------------------------------------------------*/
+    /*       I n t e r n a l   V a r i a b l e s       */
+    /*-------------------------------------------------*/
+    /**
+     * Instance of the KupManager class.
+     */
+    this.kupManager = kupManagerInstance();
+    // Arcs generator
+    this.arcGenerator = arc();
+    /**
+     * Holds the maximum positive interval.
+     * Percentages are calculated as it follows:
+     * MIN = 0 = the value the prop minValue gets transformed to\
+     * MAX = ABSOLUTE(minValue - maxValue) = the maxValuePositive holds this value
+     * TVALUE = value - minValue = any value, which needs to be represented on the chart
+     * @namespace kup-gauge.maxValuePositive
+     */
+    this.maxValuePositive = 0;
+    this.arcThickness = 30;
+    this.colors = [
+      `var(${KupThemeColorValues.SUCCESS})`,
+      `var(${KupThemeColorValues.WARNING})`,
+      `var(${KupThemeColorValues.DANGER})`,
+    ];
+    this.customStyle = '';
+    this.firstThreshold = undefined;
+    this.labelDistance = 20;
+    this.maxValue = 100;
+    this.measurementUnit = '';
+    this.minValue = -100;
+    this.needleCircle = false;
+    this.onlyValue = false;
+    this.reverseColors = false;
+    this.secondThreshold = undefined;
+    this.showLabels = true;
+    this.showMaxmin = true;
+    this.showValue = true;
+    this.size = 300;
+    this.value = 0;
+    this.valueSize = 0;
+    this.widthComponent = '100%';
+  }
+  /*-------------------------------------------------*/
+  /*           P u b l i c   M e t h o d s           */
+  /*-------------------------------------------------*/
+  /**
+   * Used to retrieve component's props values.
+   * @param {boolean} descriptions - When provided and true, the result will be the list of props with their description.
+   * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
+   */
+  async getProps(descriptions) {
+    return getProps(this, KupGaugeProps, descriptions);
+  }
+  /**
+   * This method is used to trigger a new render of the component.
+   */
+  async refresh() {
+    forceUpdate(this);
+  }
+  /**
+   * Sets the props to the component.
+   * @param {GenericObject} props - Object containing props that will be set to the component.
+   */
+  async setProps(props) {
+    setProps(this, KupGaugeProps, props);
+  }
+  /*-------------------------------------------------*/
+  /*           P r i v a t e   M e t h o d s         */
+  /*-------------------------------------------------*/
+  percToDeg(perc) {
+    return perc * 360;
+  }
+  degToRad(deg) {
+    return (deg * Math.PI) / 180;
+  }
+  percToRad(perc) {
+    return this.degToRad(this.percToDeg(perc));
+  }
+  /**
+   * Given a valid value, minValue <= value <= maxValue, calculates this value as a percentage of the interval [minValue, maxValue]
+   * @param {number} valueToPercentage - The value to be calculated as a percentage
+   * @see kup-gauge.maxValuePositive
+   */
+  calculateValuePercentage(valueToPercentage = 0) {
+    return (valueToPercentage - this.minValue) / this.maxValuePositive;
+  }
+  calculateValueFontSize() {
+    switch (this.valueSize) {
+      case 3:
+        return '350%';
+      case 2:
+        return '325%';
+      case 1:
+        return '300%';
+      default:
+      case 0:
+        return '275%';
+    }
+  }
+  //---- Rendering functions ----
+  /**
+   * Provided all the necessary data, returns the string necessary for a <path/> element to build the gauge needle.
+   * @param needleLength - A pure number of viewbox units indicating the needle lenght.
+   * @param needleBaseRadius - Sets the needle radius in viewbox units.
+   * @param centerX - X coordinate of the center of the base needle.
+   * @param centerY - Y coordinate of the center of the base needle.
+   * @param rotationPercentage {number} - A percentage number setting the current rotation of the needle. (0 < rotationPercentage < 1)
+   * @returns {string}
+   */
+  paintNeedle(needleLength, needleBaseRadius, centerX, centerY, rotationPercentage = 0) {
+    let leftX, leftY, rightX, rightY, thetaRad, topX, topY;
+    thetaRad = this.percToRad(rotationPercentage / 2); // Since the gauge is a semicircle, we must divide the percentage in half to have the correct angle
+    topX = centerX - needleLength * Math.cos(thetaRad);
+    topY = centerY - needleLength * Math.sin(thetaRad);
+    leftX = centerX - needleBaseRadius * Math.cos(thetaRad - Math.PI / 2);
+    leftY = centerY - needleBaseRadius * Math.sin(thetaRad - Math.PI / 2);
+    rightX = centerX - needleBaseRadius * Math.cos(thetaRad + Math.PI / 2);
+    rightY = centerY - needleBaseRadius * Math.sin(thetaRad + Math.PI / 2);
+    return ('M ' +
+      leftX +
+      ' ' +
+      leftY +
+      ' L ' +
+      topX +
+      ' ' +
+      topY +
+      ' L ' +
+      rightX +
+      ' ' +
+      rightY);
+  }
+  /*-------------------------------------------------*/
+  /*          L i f e c y c l e   H o o k s          */
+  /*-------------------------------------------------*/
+  componentWillLoad() {
+    this.kupManager.debug.logLoad(this, false);
+    this.kupManager.theme.register(this);
+  }
+  componentDidLoad() {
+    this.kupManager.debug.logLoad(this, true);
+  }
+  componentWillRender() {
+    this.kupManager.debug.logRender(this, false);
+    if (!this.labelDistance) {
+      this.labelDistance = 20;
+    }
+    if (this.maxValue === undefined || this.maxValue === null) {
+      this.maxValue = 100;
+    }
+    if (this.minValue === undefined || this.minValue === null) {
+      this.minValue = -100;
+    }
+  }
+  componentDidRender() {
+    this.kupManager.debug.logRender(this, true);
+  }
+  render() {
+    if (isNaN(this.value)) {
+      this.kupManager.debug.logMessage(this, 'Invalid value, not rendering!', KupDebugCategory.WARNING);
+      return;
+    }
+    // mathematical operations
+    this.maxValuePositive = Math.abs(this.minValue - this.maxValue);
+    let tempValue = this.value;
+    if (this.value > this.maxValue) {
+      this.value = this.maxValue;
+    }
+    if (this.value < this.minValue) {
+      this.value = this.minValue;
+    }
+    // Svg constants
+    let yValueMultiplier = 1;
+    switch (this.valueSize) {
+      case 3:
+        yValueMultiplier = 3;
+        break;
+      case 2:
+        yValueMultiplier = 2.75;
+        break;
+      case 1:
+        yValueMultiplier = 2.5;
+        break;
+      default:
+      case 0:
+        yValueMultiplier = 2.25;
+        break;
+    }
+    const halvedSize = this.size / 2; // The svg size ratio w : w / 2
+    const needleCircleRadius = this.size / 20; // Arbitrary size of the base of the needle
+    const needleLength = halvedSize - 2 * this.arcThickness; // Calculates the length of the needle in pure units
+    const valueLabelYPosition = halvedSize +
+      needleCircleRadius +
+      this.labelDistance * yValueMultiplier;
+    // User provided thresholds
+    // TODO these thresholds will be given to the component by a user prop
+    const givenThresholds = [];
+    if (!this.onlyValue) {
+      if (this.firstThreshold || 0 === this.firstThreshold) {
+        givenThresholds.push(this.firstThreshold);
+      }
+      if (this.secondThreshold || 0 === this.secondThreshold) {
+        givenThresholds.push(this.secondThreshold);
+      }
+    }
+    else {
+      givenThresholds.push(this.value);
+    }
+    // This creates the various point from which the arcs are generated
+    const arcsThresholds = [
+      this.minValue,
+      ...givenThresholds,
+      this.maxValue,
+    ];
+    // Creates arc elements and chooses their color orders
+    const arcsElements = [];
+    let arcsColors;
+    if (!this.onlyValue) {
+      arcsColors = !this.reverseColors
+        ? this.colors
+        : this.colors.slice().reverse();
+    }
+    else {
+      let computedcolors = !this.reverseColors
+        ? this.colors
+        : this.colors.slice().reverse();
+      let valuecolor = this.value < this.firstThreshold
+        ? computedcolors[0]
+        : this.value < this.secondThreshold
+          ? computedcolors[1]
+          : computedcolors[2];
+      arcsColors = [
+        valuecolor,
+        `rgba(var(${KupThemeColorValues.TEXT}-rgb), .1)`,
+      ];
+    }
+    for (let i = 0; i < arcsThresholds.length - 1; i++) {
+      const currentArcPath = this.arcGenerator({
+        innerRadius: halvedSize - this.arcThickness,
+        outerRadius: halvedSize,
+        startAngle: this.calculateValuePercentage(arcsThresholds[i]) * Math.PI,
+        endAngle: this.calculateValuePercentage(arcsThresholds[i + 1]) *
+          Math.PI,
+      });
+      // If there is no color specified for that arc, we provide a black fallback
+      arcsElements.push(h("path", { d: currentArcPath, style: { fill: arcsColors[i] ? arcsColors[i] : '#000000' } }));
+    }
+    // Composes the threshold label elements, if labels must be displayed
+    const textElements = this.showLabels || this.showMaxmin
+      ? arcsThresholds.map((threshold) => {
+        // Given the
+        const thresholdPercentage = this.calculateValuePercentage(threshold);
+        // Decides the position of the text
+        // @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor
+        let textPosition = 'end';
+        if (thresholdPercentage > 0.5) {
+          textPosition = 'start';
+        }
+        else if (thresholdPercentage === 0.5) {
+          textPosition = 'middle';
+        }
+        // Since the gauge is a semicircle, we must divide the percentage in half to have the correct angle
+        const thetaRad = this.percToRad(thresholdPercentage / 2);
+        let topX = halvedSize - (needleLength + 2) * Math.cos(thetaRad);
+        let topY = halvedSize - (needleLength + 2) * Math.sin(thetaRad);
+        let retValue = '';
+        if (thresholdPercentage > 0 && thresholdPercentage < 1) {
+          if (this.showLabels && !this.onlyValue) {
+            retValue = (h("text", { class: "gauge__label-text", "text-anchor": textPosition, x: topX, y: topY }, this.kupManager.math.numberStringToFormattedString(String(threshold), -1, '')));
+          }
+        }
+        else {
+          if (this.showMaxmin) {
+            if (thresholdPercentage === 0) {
+              topX = this.arcThickness;
+              topY = halvedSize + this.labelDistance;
+            }
+            else {
+              topX = this.size - this.arcThickness;
+              topY = halvedSize + this.labelDistance;
+            }
+            retValue = (h("text", { class: "gauge__label-text", "text-anchor": textPosition, x: topX, y: topY }, this.kupManager.math.numberStringToFormattedString(String(threshold), -1, '')));
+          }
+        }
+        return retValue;
+      })
+      : [];
+    const style = { fontSize: this.calculateValueFontSize() };
+    let valueText = undefined;
+    if (this.showValue) {
+      valueText = (h("text", { class: "gauge__label-text value", "text-anchor": "middle", x: halvedSize, y: valueLabelYPosition, style: style }, this.kupManager.math.numberStringToFormattedString(String(tempValue), -1, '') +
+        ' ' +
+        this.measurementUnit));
+    }
+    const width = { width: this.widthComponent };
+    return (h(Host, null, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId, class: "gauge__container" }, h("svg", { class: "gauge", style: width, viewBox: `0 0 ${this.size} ${valueLabelYPosition}` }, h("g", { transform: `rotate(-90) translate(-${halvedSize}, ${halvedSize})` }, arcsElements), this.needleCircle ? (h("circle", { class: "gauge__needle-base", cx: halvedSize, cy: halvedSize, r: needleCircleRadius })) : null, h("path", { class: "gauge__needle", d: this.paintNeedle(needleLength, needleCircleRadius, halvedSize, halvedSize, this.calculateValuePercentage(this.value)) }), textElements, valueText))));
+  }
+  disconnectedCallback() {
+    this.kupManager.theme.unregister(this);
+  }
+  static get is() { return "kup-gauge"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["kup-gauge.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["kup-gauge.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "arcThickness": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "namespace",
+              "text": "kup-gauge.arcThickness"
+            }, {
+              "name": "see",
+              "text": "kup-gauge.size"
+            }],
+          "text": "Sets how much the arc of the gauge should be thick."
+        },
+        "attribute": "arc-thickness",
+        "reflect": false,
+        "defaultValue": "30"
+      },
+      "colors": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Array of three elements to specify the color of the arcs."
+        },
+        "defaultValue": "[\r\n        `var(${KupThemeColorValues.SUCCESS})`,\r\n        `var(${KupThemeColorValues.WARNING})`,\r\n        `var(${KupThemeColorValues.DANGER})`,\r\n    ]"
+      },
+      "customStyle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"\""
+            }, {
+              "name": "see",
+              "text": "https://ketchup.smeup.com/ketchup-showcase/#/customization"
+            }],
+          "text": "Custom style of the component."
+        },
+        "attribute": "custom-style",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "firstThreshold": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The first threshold, establishing the length of the first and second arc."
+        },
+        "attribute": "first-threshold",
+        "reflect": false
+      },
+      "labelDistance": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The distance the label and the value has from the gauge graph."
+        },
+        "attribute": "label-distance",
+        "reflect": false,
+        "defaultValue": "20"
+      },
+      "maxValue": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The maximum value reachable in the current graph."
+        },
+        "attribute": "max-value",
+        "reflect": false,
+        "defaultValue": "100"
+      },
+      "measurementUnit": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A string which will be appended to the displayed values of the component."
+        },
+        "attribute": "measurement-unit",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "minValue": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The minimum value reachable in the current graph."
+        },
+        "attribute": "min-value",
+        "reflect": false,
+        "defaultValue": "-100"
+      },
+      "needleCircle": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, shows a rounded needle."
+        },
+        "attribute": "needle-circle",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "onlyValue": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, ignore thresholds in gauge and show colored value's arc."
+        },
+        "attribute": "only-value",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "reverseColors": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, the colors inside the colors array are used in the reversed order."
+        },
+        "attribute": "reverse-colors",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "secondThreshold": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The second threshold, establishing the length of the second and third arc."
+        },
+        "attribute": "second-threshold",
+        "reflect": false
+      },
+      "showLabels": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If set to false, threshold values of the gauge are not displayed."
+        },
+        "attribute": "show-labels",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "showMaxmin": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If set to false, the maximum and minimum values of the gauge are not displayed."
+        },
+        "attribute": "show-maxmin",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "showValue": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If set to false, the current value of the gauge is not displayed."
+        },
+        "attribute": "show-value",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "namespace",
+              "text": "kup-gauge.size"
+            }, {
+              "name": "see",
+              "text": "kup-gauge.arcThickness"
+            }],
+          "text": "Con be used change the viewbox of the SVG.\r\nBy manipulating this value, some customizations of the aspect of the gauge is achievable."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "300"
+      },
+      "value": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The current value of the gauge.\r\nThe gauge's needle points to the percentage based on this prop."
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "valueSize": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The current size of gauge's value.\r\nCorrect values are: 0,1,2 or 3."
+        },
+        "attribute": "value-size",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "widthComponent": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set Width gauge."
+        },
+        "attribute": "width-component",
+        "reflect": false,
+        "defaultValue": "'100%'"
+      }
+    };
+  }
+  static get methods() {
+    return {
+      "getProps": {
+        "complexType": {
+          "signature": "(descriptions?: boolean) => Promise<GenericObject>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "descriptions - When provided and true, the result will be the list of props with their description."
+                }],
+              "text": "- When provided and true, the result will be the list of props with their description."
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "GenericObject": {
+              "location": "import",
+              "path": "../../types/GenericTypes"
+            }
+          },
+          "return": "Promise<GenericObject>"
+        },
+        "docs": {
+          "text": "Used to retrieve component's props values.",
+          "tags": [{
+              "name": "param",
+              "text": "descriptions - When provided and true, the result will be the list of props with their description."
+            }, {
+              "name": "returns",
+              "text": "List of props as object, each key will be a prop."
+            }]
+        }
+      },
+      "refresh": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "This method is used to trigger a new render of the component.",
+          "tags": []
+        }
+      },
+      "setProps": {
+        "complexType": {
+          "signature": "(props: GenericObject) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "props - Object containing props that will be set to the component."
+                }],
+              "text": "- Object containing props that will be set to the component."
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "GenericObject": {
+              "location": "import",
+              "path": "../../types/GenericTypes"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets the props to the component.",
+          "tags": [{
+              "name": "param",
+              "text": "props - Object containing props that will be set to the component."
+            }]
+        }
+      }
+    };
+  }
+  static get elementRef() { return "rootElement"; }
+}