@xen-orchestra/web-core 0.12.0 → 0.13.0

package/lib/components/ui/stacked-bar/UiStackedBar.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="ui-stacked-bar">
     <StackedBarSegment
-      v-for="(segment, index) in segments"
+      v-for="(segment, index) in parsedSegments"
       :key="index"
       :accent="segment.accent"
       :percentage="max === 0 ? 0 : (segment.value / max) * 100"
@@ -12,23 +12,36 @@
 
 <script lang="ts" setup>
 import StackedBarSegment, { type StackedBarSegmentProps } from '@core/components/ui/stacked-bar/StackedBarSegment.vue'
+import { formatSizeParse } from '@core/utils/size.util'
 import { computed } from 'vue'
 
 type Segment = {
   value: number
   accent: StackedBarSegmentProps['accent']
+  unit?: string
 }
 
 export type StackedBarProps = {
   segments: Segment[]
-  maxValue?: number
+  maxValue?: {
+    value?: number
+    unit?: string
+  }
 }
 
 const props = defineProps<StackedBarProps>()
 
-const totalValue = computed(() => props.segments.reduce((acc, segment) => acc + segment.value, 0))
+const totalValue = computed(() =>
+  props.segments.reduce((acc, segment) => acc + (formatSizeParse(segment.value, segment.unit) ?? 0), 0)
+)
 
-const max = computed(() => Math.max(props.maxValue ?? 0, totalValue.value))
+const max = computed(() =>
+  Math.max(formatSizeParse(props.maxValue?.value, props.maxValue?.unit) ?? 0, totalValue.value)
+)
+
+const parsedSegments = computed(() =>
+  props.segments.map(segment => ({ ...segment, value: formatSizeParse(segment.value, segment.unit) ?? 0 }))
+)
 </script>
 
 <style lang="postcss" scoped>

package/lib/utils/size.util.ts

@@ -0,0 +1,30 @@
+import { parse, Scale, raw } from 'human-format'
+
+const scale = Scale.create(['', 'KiB', 'MiB', 'GiB', 'TiB'], 1024)
+
+export const formatSizeRaw = (bytes: number | undefined, decimals: number) => {
+  if (bytes === undefined) {
+    return undefined
+  }
+
+  return raw(bytes, { maxDecimals: decimals, scale })
+}
+
+export const formatSizeParse = (size: number | undefined, unit?: string) => {
+  if (size === undefined) {
+    return undefined
+  }
+
+  let value = String(size)
+  if (unit !== undefined) {
+    value += ` ${unit}`
+  }
+
+  const result = parse(value, { scale })
+  if (isNaN(result)) {
+    console.error(`[formatSizeParse]: got ${result}, expected a number`)
+    return undefined
+  }
+
+  return result
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xen-orchestra/web-core",
   "type": "module",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "private": false,
   "exports": {
     "./*": {
@@ -23,6 +23,7 @@
     "@vueuse/shared": "^10.7.1",
     "d3-time-format": "^4.1.0",
     "echarts": "^5.4.3",
+    "human-format": "^1.2.1",
     "iterable-backoff": "^0.1.0",
     "lodash-es": "^4.17.21",
     "placement.js": "^1.0.0-beta.5",