From 1f4457d9ca02683ca4f8cf4df0699750dac5b693 Mon Sep 17 00:00:00 2001
From: Thierry Goettelmann <thierry@byscripts.info>
Date: Tue, 14 Feb 2023 11:42:29 +0100
Subject: [PATCH] fix(lite/charts): fix Chart reactivity (#6618)

---
 .../src/components/charts/ChartSummary.vue    |  6 ++++--
 .../src/components/charts/LinearChart.vue     | 19 ++++++++++++++-----
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/@xen-orchestra/lite/src/components/charts/ChartSummary.vue b/@xen-orchestra/lite/src/components/charts/ChartSummary.vue
index cb1fcbfb4..712312c73 100644
--- a/@xen-orchestra/lite/src/components/charts/ChartSummary.vue
+++ b/@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>
diff --git a/@xen-orchestra/lite/src/components/charts/LinearChart.vue b/@xen-orchestra/lite/src/components/charts/LinearChart.vue
index 098298d19..a4596ba17 100644
--- a/@xen-orchestra/lite/src/components/charts/LinearChart.vue
+++ b/@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",