Change text to icons in popup similar to sidebar

JetBrains · Nov 10, 2023 · 5b8cf2f · 5b8cf2f
1 parent 862179c
commit 5b8cf2f
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 50 deletions.
diff --git a/dashboard/new-dashboard/src/components/charts/PerformanceLineChartVM.ts b/dashboard/new-dashboard/src/components/charts/PerformanceLineChartVM.ts
@@ -1,6 +1,7 @@
 import { CallbackDataParams, OptionDataValue } from "echarts/types/src/util/types"
 import { Accident, AccidentKind, AccidentsConfigurator, getAccidents } from "../../configurators/AccidentsConfigurator"
-import { appendPopupElement, Delta, findDeltaInData } from "../../util/Delta"
+import { appendLineWithIcon, getLeftArrow, getRightArrow, getWarningIcon } from "../../shared/popupIcons"
+import { Delta, findDeltaInData, getDifferenceString } from "../../util/Delta"
 import { DataQueryExecutor, DataQueryResult } from "../common/DataQueryExecutor"
 import { timeFormat, ValueUnit } from "../common/chart"
 import { DataQueryExecutorConfiguration } from "../common/dataQuery"
@@ -9,30 +10,6 @@ import { durationAxisPointerFormatter, nsToMs, numberFormat, timeFormatWithoutSe
 import { useSettingsStore } from "../settings/settingsStore"
 import { PerformanceChartManager } from "./PerformanceChartManager"
 
-function getWarningIcon() {
-  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
-  svg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
-  svg.setAttribute("fill", "none")
-  svg.setAttribute("viewBox", "0 0 24 24")
-  svg.setAttribute("stroke-width", "1.5")
-  svg.setAttribute("stroke", "currentColor")
-  svg.setAttribute("class", "w-6 h-6")
-  const path = document.createElementNS("http://www.w3.org/2000/svg", "path")
-  path.setAttribute("stroke-linecap", "round")
-  path.setAttribute("stroke-linejoin", "round")
-  path.setAttribute(
-    "d",
-    "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 " +
-      "0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
-  )
-  svg.append(path)
-
-  const div = document.createElement("div")
-  div.setAttribute("class", "w-1 h-1")
-  div.append(svg)
-  return div
-}
-
 export class PerformanceLineChartVM {
   private settings = useSettingsStore()
   private getFormatter(isMs: boolean) {
@@ -52,20 +29,18 @@ export class PerformanceLineChartVM {
       const accidents = getAccidents(this.accidentsConfigurator?.value.value, data as string[])
       if (accidents != null) {
         for (const accident of accidents) {
-          //<ExclamationTriangleIcon class="w-4 h-4 text-red-500" /> Known degradation:
-          element.append(document.createElement("br"))
-          const accidentHtml = document.createElement("span")
-          accidentHtml.setAttribute("class", "flex gap-1.5 items-center")
-          const div = getWarningIcon()
-          accidentHtml.append(div)
-          accidentHtml.append(this.getAccidentMessage(accident))
-          element.append(accidentHtml)
+          appendLineWithIcon(element, getWarningIcon(), this.getAccidentMessage(accident))
         }
       }
 
       const delta = findDeltaInData(data)
       if (delta != undefined) {
-        appendPopupElement(element, durationMs as number, delta, isMs, type as string)
+        if (delta.prev != null) {
+          appendLineWithIcon(element, getLeftArrow(), getDifferenceString(durationMs as number, delta.prev, isMs, type as string))
+        }
+        if (delta.next != null) {
+          appendLineWithIcon(element, getRightArrow(), getDifferenceString(durationMs as number, delta.next, isMs, type as string))
+        }
       }
       return element
     }

diff --git a/dashboard/new-dashboard/src/components/common/sideBar/InfoSidebarPerformance.ts b/dashboard/new-dashboard/src/components/common/sideBar/InfoSidebarPerformance.ts
@@ -126,10 +126,10 @@ export function getInfoDataFrom(dbType: DBType, params: CallbackDataParams, valu
   let deltaNext: string | undefined
   if (delta != undefined) {
     if (delta.prev != null) {
-      deltaPrevious = getDifferenceString(value, delta.prev, "", valueUnit == "ms", type as string)
+      deltaPrevious = getDifferenceString(value, delta.prev, valueUnit == "ms", type as string)
     }
     if (delta.next != null) {
-      deltaNext = getDifferenceString(value, delta.next, "", valueUnit == "ms", type as string)
+      deltaNext = getDifferenceString(value, delta.next, valueUnit == "ms", type as string)
     }
   }
 

diff --git a/dashboard/new-dashboard/src/shared/popupIcons.ts b/dashboard/new-dashboard/src/shared/popupIcons.ts
@@ -0,0 +1,38 @@
+function getIcon(pathString: string): Element {
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+  svg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
+  svg.setAttribute("fill", "none")
+  svg.setAttribute("viewBox", "0 0 24 24")
+  svg.setAttribute("stroke-width", "1.5")
+  svg.setAttribute("stroke", "currentColor")
+  svg.setAttribute("class", "w-3 h-3")
+  const path = document.createElementNS("http://www.w3.org/2000/svg", "path")
+  path.setAttribute("stroke-linecap", "round")
+  path.setAttribute("stroke-linejoin", "round")
+  path.setAttribute("d", pathString)
+  svg.append(path)
+  return svg
+}
+
+export function getWarningIcon() {
+  return getIcon(
+    "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 " +
+      "0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
+  )
+}
+
+export function getLeftArrow() {
+  return getIcon("M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18")
+}
+
+export function getRightArrow() {
+  return getIcon("M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3")
+}
+
+export function appendLineWithIcon(element: HTMLElement, icon: Element, text: string): void {
+  const line = document.createElement("span")
+  line.setAttribute("class", "flex gap-1.5 items-center")
+  line.append(icon)
+  line.append(text)
+  element.append(line)
+}
diff --git a/dashboard/new-dashboard/src/util/Delta.ts b/dashboard/new-dashboard/src/util/Delta.ts
@@ -24,14 +24,7 @@ export class Delta {
   }
 }
 
-function appendValueAndPercent(element: HTMLElement, value: number, otherValue: number | null, text: string, isMs: boolean, type: string) {
-  if (otherValue != null) {
-    element.append(document.createElement("br"))
-    element.append(getDifferenceString(value, otherValue, text, isMs, type))
-  }
-}
-
-export function getDifferenceString(value: number, otherValue: number, text: string, isMs: boolean, type: string): string {
+export function getDifferenceString(value: number, otherValue: number, isMs: boolean, type: string): string {
   const deltaAbs = value - otherValue
   const deltaAbsFormatted = durationAxisPointerFormatter(isMs ? Math.abs(deltaAbs) : Math.abs(deltaAbs) / 1000 / 1000, type)
   let deltaPercentFormatted = ""
@@ -40,12 +33,7 @@ export function getDifferenceString(value: number, otherValue: number, text: str
     const deltaPercent = Math.abs((deltaAbs / value) * 100)
     deltaPercentFormatted = ` (${plus}${deltaPercent.toFixed(1)}%)`
   }
-  return `${text}${plus}${deltaAbsFormatted}${deltaPercentFormatted}`
-}
-
-export function appendPopupElement(element: HTMLElement, value: number, delta: Delta, isMs: boolean, type: string): void {
-  appendValueAndPercent(element, value, delta.next, "Next: ", isMs, type)
-  appendValueAndPercent(element, value, delta.prev, "Previous: ", isMs, type)
+  return `${plus}${deltaAbsFormatted}${deltaPercentFormatted}`
 }
 
 export function findDeltaInData(data: (OptionDataValue | Delta)[]): Delta | undefined {