diff --git a/@xen-orchestra/web/src/components/DonutWithLegends.vue b/@xen-orchestra/web-core/lib/components/DonutWithLegends.vue
similarity index 56%
rename from @xen-orchestra/web/src/components/DonutWithLegends.vue
rename to @xen-orchestra/web-core/lib/components/DonutWithLegends.vue
index ed731cf4666..92e19081b60 100644
--- a/@xen-orchestra/web/src/components/DonutWithLegends.vue
+++ b/@xen-orchestra/web-core/lib/components/DonutWithLegends.vue
@@ -5,14 +5,14 @@
       <slot />
       <ul class="legends">
         <UiLegend
-          v-for="(segment, index) in segments"
+          v-for="(legendSegment, index) in legendSegments"
           :key="index"
-          :color="segment.color"
-          :value="segment.value"
-          :unit="segment.unit"
-          :tooltip="segment.tooltip"
+          :color="legendSegment.color"
+          :value="legendSegment.value"
+          :unit="legendSegment.unit"
+          :tooltip="legendSegment.tooltip"
         >
-          {{ segment.label }}
+          {{ legendSegment.label }}
         </UiLegend>
       </ul>
     </div>
@@ -20,10 +20,10 @@
 </template>
 
 <script setup lang="ts">
-import type { DonutSegment } from '@core/types/donut-chart.type'
-import type { LegendColor } from '@core/types/ui-legend.type'
 import DonutChart from '@core/components/DonutChart.vue'
 import UiLegend from '@core/components/UiLegend.vue'
+import type { DonutSegmentColor } from '@core/types/donut-chart.type'
+import type { LegendColor } from '@core/types/legend.type'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { computed } from 'vue'
 
@@ -32,7 +32,7 @@ const props = defineProps<{
     label: string
     value: number
     unit?: string
-    color: LegendColor
+    color: DonutSegmentColor
     tooltip?: string
   }[]
   icon?: IconDefinition
@@ -43,26 +43,22 @@ defineSlots<{
   default: () => void
 }>()
 
-const donutSegments = computed(() => {
-  if (props?.segments.length === 0) {
-    return []
-  }
-  return props.segments
-    .filter(segment => segment.color !== 'dark-blue')
-    .map(segment => {
-      let color
-      if (segment.color === 'disabled' || segment.color === 'default') {
-        color = 'unknown'
-      } else {
-        color = segment.color
-      }
+const donutSegments = computed(() =>
+  props.segments.map(segment => ({
+    value: segment.value,
+    color: segment.color,
+  }))
+)
 
-      return {
-        value: segment.value,
-        color,
-      }
-    }) as DonutSegment[]
-})
+const legendSegments = computed(() =>
+  props.segments.map(segment => ({
+    label: segment.label,
+    value: segment.value,
+    unit: segment.unit,
+    color: segment.color === 'unknown' ? 'disabled' : (segment.color as LegendColor),
+    tooltip: segment.tooltip,
+  }))
+)
 </script>
 
 <style lang="postcss" scoped>
diff --git a/@xen-orchestra/web-core/lib/types/donut-chart.type.ts b/@xen-orchestra/web-core/lib/types/donut-chart.type.ts
index fa3d2f946c7..19d1adcec14 100644
--- a/@xen-orchestra/web-core/lib/types/donut-chart.type.ts
+++ b/@xen-orchestra/web-core/lib/types/donut-chart.type.ts
@@ -1,5 +1,5 @@
-export type DonutColor = 'success' | 'warning' | 'error' | 'unknown'
+export type DonutSegmentColor = 'success' | 'warning' | 'error' | 'unknown'
 export type DonutSegment = {
   value: number
-  color: DonutColor
+  color: DonutSegmentColor
 }
diff --git a/@xen-orchestra/web-core/lib/types/ui-legend.type.ts b/@xen-orchestra/web-core/lib/types/legend.type.ts
similarity index 100%
rename from @xen-orchestra/web-core/lib/types/ui-legend.type.ts
rename to @xen-orchestra/web-core/lib/types/legend.type.ts