fix(lite/charts): fix Chart reactivity (#6618)

@xen-orchestra/lite/src/components/charts/ChartSummary.vue

@@ -20,8 +20,8 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject } from "vue";
 import { percent } from "@/libs/utils";
+import { computed, type ComputedRef, inject } from "vue";
 
 const props = defineProps<{
   total: number;
@@ -34,7 +34,9 @@ const freePercent = computed(() =>
   percent(props.total - props.used, props.total)
 );
 
-const valueFormatter = inject("valueFormatter") as (value: number) => string;
+const valueFormatter = inject("valueFormatter") as ComputedRef<
+  (value: number) => string
+>;
 </script>
 
 <style lang="postcss" scoped>

@xen-orchestra/lite/src/components/charts/LinearChart.vue

@@ -33,8 +33,17 @@ const props = defineProps<{
   maxValue?: number;
 }>();
 
-const valueFormatter = (value: OptionDataValue | OptionDataValue[]) =>
-  props.valueFormatter?.(value as number) ?? `${value}`;
+const valueFormatter = computed(() => {
+  const formatter = props.valueFormatter;
+
+  return (value: OptionDataValue | OptionDataValue[]) => {
+    if (formatter) {
+      return formatter(value as number);
+    }
+
+    return value.toString();
+  };
+});
 
 provide("valueFormatter", valueFormatter);
 
@@ -56,7 +65,7 @@ const option = computed<EChartsOption>(() => ({
     data: props.data.map((series) => series.label),
   },
   tooltip: {
-    valueFormatter,
+    valueFormatter: valueFormatter.value,
   },
   xAxis: {
     type: "time",
@@ -70,9 +79,9 @@ const option = computed<EChartsOption>(() => ({
   yAxis: {
     type: "value",
     axisLabel: {
-      formatter: valueFormatter,
+      formatter: valueFormatter.value,
     },
-    max: () => props.maxValue ?? Y_AXIS_MAX_VALUE,
+    max: props.maxValue ?? Y_AXIS_MAX_VALUE,
   },
   series: props.data.map((series, index) => ({
     type: "line",