Visual Console Refactor: added the percentile item to the client

Former-commit-id: d0467ed40d4013ca7fb080c9b135a9af95e8040e

visual_console/src/VisualConsole.ts

@@ -18,6 +18,7 @@ import SimpleValue, { simpleValuePropsDecoder } from "./items/SimpleValue";
 import EventsHistory, {
   eventsHistoryPropsDecoder
 } from "./items/EventsHistory";
+import Percentile, { percentilePropsDecoder } from "./items/Percentile";
 
 // Base properties.
 export interface VisualConsoleProps extends Size {
@@ -90,7 +91,9 @@ function itemInstanceFrom(data: UnknownObject) {
       return new SimpleValue(simpleValuePropsDecoder(data));
     case ItemType.PERCENTILE_BAR:
     case ItemType.PERCENTILE_BUBBLE:
-      throw new TypeError("item not found");
+    case ItemType.CIRCULAR_PROGRESS_BAR:
+    case ItemType.CIRCULAR_INTERIOR_PROGRESS_BAR:
+      return new Percentile(percentilePropsDecoder(data));
     case ItemType.LABEL:
       return new Label(labelPropsDecoder(data));
     case ItemType.ICON:
@@ -105,8 +108,6 @@ function itemInstanceFrom(data: UnknownObject) {
       return new Line(linePropsDecoder(data));
     case ItemType.AUTO_SLA_GRAPH:
       return new EventsHistory(eventsHistoryPropsDecoder(data));
-    case ItemType.CIRCULAR_PROGRESS_BAR:
-    case ItemType.CIRCULAR_INTERIOR_PROGRESS_BAR:
     case ItemType.DONUT_GRAPH:
     case ItemType.BARS_GRAPH:
       throw new TypeError("item not found");

visual_console/src/items/Percentile.ts

@@ -0,0 +1,109 @@
+import {
+  LinkedVisualConsoleProps,
+  UnknownObject,
+  WithModuleProps
+} from "../types";
+import {
+  linkedVCPropsDecoder,
+  modulePropsDecoder,
+  decodeBase64,
+  stringIsEmpty,
+  notEmptyStringOr
+} from "../lib";
+import Item, { ItemType, ItemProps, itemBasePropsDecoder } from "../Item";
+
+export type PercentileProps = {
+  type: ItemType.PERCENTILE_BAR;
+  percentileType:
+    | "progress-bar"
+    | "bubble"
+    | "circular-progress-bar"
+    | "circular-progress-bar-alt";
+  valueType: "percent" | "value";
+  value: string | null;
+  color: string | null;
+  labelColor: string | null;
+  html: string;
+} & ItemProps &
+  WithModuleProps &
+  LinkedVisualConsoleProps;
+
+/**
+ * Extract a valid enum value from a raw type value.
+ * @param type Raw value.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function extractPercentileType(type: any): PercentileProps["percentileType"] {
+  switch (type) {
+    case "progress-bar":
+    case "bubble":
+    case "circular-progress-bar":
+    case "circular-progress-bar-alt":
+      return type;
+    default:
+    case ItemType.PERCENTILE_BAR:
+      return "progress-bar";
+    case ItemType.PERCENTILE_BUBBLE:
+      return "bubble";
+    case ItemType.CIRCULAR_PROGRESS_BAR:
+      return "circular-progress-bar";
+    case ItemType.CIRCULAR_INTERIOR_PROGRESS_BAR:
+      return "circular-progress-bar-alt";
+  }
+}
+
+/**
+ * Extract a valid enum value from a raw value type value.
+ * @param type Raw value.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function extractValueType(valueType: any): PercentileProps["valueType"] {
+  switch (valueType) {
+    case "percent":
+    case "value":
+      return valueType;
+    default:
+      return "percent";
+  }
+}
+
+/**
+ * Build a valid typed object from a raw object.
+ * This will allow us to ensure the type safety.
+ *
+ * @param data Raw object.
+ * @return An object representing the percentile props.
+ * @throws Will throw a TypeError if some property
+ * is missing from the raw object or have an invalid type.
+ */
+export function percentilePropsDecoder(
+  data: UnknownObject
+): PercentileProps | never {
+  if (stringIsEmpty(data.html) || stringIsEmpty(data.encodedHtml)) {
+    throw new TypeError("missing html content.");
+  }
+
+  return {
+    ...itemBasePropsDecoder(data), // Object spread. It will merge the properties of the two objects.
+    type: ItemType.PERCENTILE_BAR,
+    percentileType: extractPercentileType(data.type),
+    valueType: extractValueType(data.valueType),
+    value: notEmptyStringOr(data.value, null),
+    color: notEmptyStringOr(data.color, null),
+    labelColor: notEmptyStringOr(data.labelColor, null),
+    html: !stringIsEmpty(data.html)
+      ? data.html
+      : decodeBase64(data.encodedHtml),
+    ...modulePropsDecoder(data), // Object spread. It will merge the properties of the two objects.
+    ...linkedVCPropsDecoder(data) // Object spread. It will merge the properties of the two objects.
+  };
+}
+
+export default class Percentile extends Item<PercentileProps> {
+  public createDomElement(): HTMLElement {
+    const element = document.createElement("div");
+    element.innerHTML = this.props.html;
+
+    return element;
+  }
+}