fixed errors VC

pandora_console/operation/visual_console/view.php

@@ -400,6 +400,22 @@ ui_require_css_file('form');
     var handleUpdate = function (prevProps, newProps) {
         if (!newProps) return;
 
+        //Remove spinner change VC.
+        document
+            .getElementById("visual-console-container")
+            .classList.remove("is-updating");
+
+        var div = document
+            .getElementById("visual-console-container")
+            .querySelector(".div-visual-console-spinner");
+
+        if (div !== null) {
+            var parent = div.parentElement;
+            if (parent !== null) {
+            parent.removeChild(div);
+            }
+        }
+
         // Change the background color when the fullscreen mode is enabled.
         if (prevProps
             && prevProps.backgroundColor != newProps.backgroundColor

visual_console_client/src/Item.ts

@@ -523,6 +523,7 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
         divParent.appendChild(divSpinner);
         const containerVC = document.getElementById("visual-console-container");
         if (containerVC != null) {
+          containerVC.classList.add("is-updating");
           containerVC.appendChild(divParent);
         }
       }

visual_console_client/src/items/Percentile.ts

@@ -112,8 +112,6 @@ export default class Percentile extends Item<PercentileProps> {
     const progress = this.getProgress();
     // Main element.
     const element = document.createElement("div");
-    // SVG container.
-    const svg = document.createElementNS(svgNS, "svg");
 
     var formatValue;
     if (this.props.value != null) {
@@ -124,30 +122,36 @@ export default class Percentile extends Item<PercentileProps> {
       }
     }
 
+    // SVG container.
+    const svg = document.createElementNS(svgNS, "svg");
+
     switch (this.props.percentileType) {
       case "progress-bar":
         {
           const backgroundRect = document.createElementNS(svgNS, "rect");
           backgroundRect.setAttribute("fill", colors.background);
           backgroundRect.setAttribute("fill-opacity", "0.5");
-          backgroundRect.setAttribute("width", "100");
-          backgroundRect.setAttribute("height", "20");
+          backgroundRect.setAttribute("width", "100%");
+          backgroundRect.setAttribute("height", "100%");
           backgroundRect.setAttribute("rx", "5");
           backgroundRect.setAttribute("ry", "5");
           const progressRect = document.createElementNS(svgNS, "rect");
           progressRect.setAttribute("fill", colors.progress);
           progressRect.setAttribute("fill-opacity", "1");
-          progressRect.setAttribute("width", `${progress}`);
-          progressRect.setAttribute("height", "20");
+          progressRect.setAttribute("width", `${progress}%`);
+          progressRect.setAttribute("height", "100%");
           progressRect.setAttribute("rx", "5");
           progressRect.setAttribute("ry", "5");
           const text = document.createElementNS(svgNS, "text");
           text.setAttribute("text-anchor", "middle");
           text.setAttribute("alignment-baseline", "middle");
-          text.setAttribute("font-size", "12");
+          text.setAttribute("font-size", "15");
           text.setAttribute("font-family", "arial");
           text.setAttribute("font-weight", "bold");
-          text.setAttribute("transform", "translate(50 11)");
+          text.setAttribute(
+            "transform",
+            `translate(${this.props.width / 2}, 17.5)`
+          );
           text.setAttribute("fill", colors.text);
 
           if (this.props.valueType === "value") {
@@ -160,8 +164,8 @@ export default class Percentile extends Item<PercentileProps> {
             text.textContent = `${progress}%`;
           }
 
-          // Auto resize SVG using the view box magic: https://css-tricks.com/scale-svg/
-          svg.setAttribute("viewBox", "0 0 100 20");
+          svg.setAttribute("width", "100%");
+          svg.setAttribute("height", "100%");
           svg.append(backgroundRect, progressRect, text);
         }
         break;
@@ -257,7 +261,7 @@ export default class Percentile extends Item<PercentileProps> {
         break;
     }
 
-    element.append(svg);
+    if (svg !== null) element.append(svg);
 
     return element;
   }
@@ -279,7 +283,7 @@ export default class Percentile extends Item<PercentileProps> {
    */
   protected resizeElement(width: number, height: number): void {
     if (this.props.percentileType === "progress-bar") {
-      super.resizeElement(width, width / 4);
+      super.resizeElement(width, 35);
     } else {
       super.resizeElement(width, width);
     }
@@ -291,7 +295,10 @@ export default class Percentile extends Item<PercentileProps> {
    */
   public resize(width: number): void {
     this.resizeElement(width, width);
-    const height = this.props.maxValue || 0;
+    let height = this.props.maxValue || 0;
+    if (this.props.percentileType === "progress-bar") {
+      height = 35;
+    }
     super.setProps({
       ...this.props, // Object spread: http://es6-features.org/#SpreadOperator
       width,