[UXE-6024] refactor: improve data volume formatting with new calculat…

…ion method (#2171)
aziontech · Feb 20, 2025 · c583ebc · c583ebc
1 parent 732f4b0
commit c583ebc
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 26 deletions.
diff --git a/src/modules/real-time-metrics/chart/format-c3-graph-props.js b/src/modules/real-time-metrics/chart/format-c3-graph-props.js
@@ -130,46 +130,45 @@ function formatPercentageDataUnit(data) {
   }).format(data / 100)
 }
 
+function calculateValueAndUnit(data, unit) {
+  if (data > CHART_RULES.DATA_VOLUME.tera) {
+    return { value: data / CHART_RULES.DATA_VOLUME.tera, formattedUnit: `tera${unit}` }
+  }
+  if (data > CHART_RULES.DATA_VOLUME.giga) {
+    return { value: data / CHART_RULES.DATA_VOLUME.giga, formattedUnit: `giga${unit}` }
+  }
+  if (data > CHART_RULES.DATA_VOLUME.mega) {
+    return { value: data / CHART_RULES.DATA_VOLUME.mega, formattedUnit: `mega${unit}` }
+  }
+  if (data > CHART_RULES.DATA_VOLUME.kilo) {
+    return { value: data / CHART_RULES.DATA_VOLUME.kilo, formattedUnit: `kilo${unit}` }
+  }
+  return { value: data, formattedUnit: unit }
+}
+
 /**
  * Format data for displaying byte unit
  * @param {number} data - The data to be formatted
  * @param {Object} chartData - The chart data
  * @returns {string} - Returns the formatted data for byte unit display
  */
 function formatBytesDataUnit(data, chartData) {
-  let value = data
-  let unit = 'byte'
+  const unit = chartData.dataUnit === 'bitsPerSecond' ? 'bit-per-second' : 'byte'
 
-  if (chartData.dataUnit === 'bitsPerSecond') {
-    unit = 'bit-per-second'
-  }
+  const { value, formattedUnit } = calculateValueAndUnit(Math.abs(data), unit)
 
-  if (data > CHART_RULES.DATA_VOLUME.tera) {
-    value = data / CHART_RULES.DATA_VOLUME.tera
-    unit = `tera${unit}`
-  } else if (data > CHART_RULES.DATA_VOLUME.giga) {
-    value = data / CHART_RULES.DATA_VOLUME.giga
-    unit = `giga${unit}`
-  } else if (data > CHART_RULES.DATA_VOLUME.mega) {
-    value = data / CHART_RULES.DATA_VOLUME.mega
-    unit = `mega${unit}`
-  } else if (data > CHART_RULES.DATA_VOLUME.kilo) {
-    value = data / CHART_RULES.DATA_VOLUME.kilo
-    unit = `kilo${unit}`
-  }
-
-  /**
-   * Formatter for byte display
-   */
-  const byteValueNumberFormatter = Intl.NumberFormat('en', {
+  const formattedData = Intl.NumberFormat('en', {
     notation: 'compact',
     style: 'unit',
-    unit,
+    unit: formattedUnit,
     unitDisplay: 'narrow',
     minimumFractionDigits: CHART_RULES.TO_FIXED_DATA_VOLUME,
     maximumFractionDigits: CHART_RULES.TO_FIXED_DATA_VOLUME
-  })
-  return byteValueNumberFormatter.format(value)
+  }).format(value)
+
+  const isNegativeData = data < 0
+
+  return isNegativeData ? `-${formattedData}` : formattedData
 }
 
 /**

diff --git a/src/templates/graphs-card-block/components/chart/line-chart.vue b/src/templates/graphs-card-block/components/chart/line-chart.vue
@@ -14,6 +14,9 @@
     generateGraph()
   })
 
+  const calculateYMin = () =>
+    Math.min(0, ...props.resultChart.flat().filter((value) => typeof value === 'number'))
+
   const generateGraph = () => {
     const c3Props = FormatC3GraphProps({
       chartData: props.chartData,
@@ -22,6 +25,8 @@
       hasMeanLineSeries: props.hasMeanLineSeries
     })
 
+    c3Props.axis.y.min = calculateYMin()
+
     c3.generate({
       bindto: `#line-chart-${props.chartData?.id}`,
       ...c3Props