From 617573e8725fd6b6073acaaeaec26da58ff3bbb2 Mon Sep 17 00:00:00 2001
From: Kazi <kazinoshin.jo@gmail.com>
Date: Mon, 13 Jan 2025 16:52:59 +0600
Subject: [PATCH] Update process speed chart to use new fluentui preview
 charting library

---
 .../src/features/activities/ProcessSpeedChart.tsx    | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/urbackupserver/www2/src/features/activities/ProcessSpeedChart.tsx b/urbackupserver/www2/src/features/activities/ProcessSpeedChart.tsx
index b792cabd..ee4212bf 100644
--- a/urbackupserver/www2/src/features/activities/ProcessSpeedChart.tsx
+++ b/urbackupserver/www2/src/features/activities/ProcessSpeedChart.tsx
@@ -1,15 +1,9 @@
-import { type IChartProps, Sparkline } from "@fluentui/react-charting";
+import { Sparkline, ChartProps } from "@fluentui/react-charts-preview";
 import { tokens } from "@fluentui/react-components";
 
 import type { ProcessItem } from "../../api/urbackupserver";
 import { format_speed_bpms_to_bps } from "../../utils/format";
 
-const sparklineStyles = {
-  valueText: {
-    fill: tokens.colorNeutralForeground1,
-  },
-};
-
 export function ProcessSpeedChart(process: ProcessItem) {
   if (process.speed_bpms === 0 && process.past_speed_bpms.length === 0) {
     return "-";
@@ -18,7 +12,7 @@ export function ProcessSpeedChart(process: ProcessItem) {
   const legend =
     process.speed_bpms > 0 ? format_speed_bpms_to_bps(process.speed_bpms) : "";
 
-  const data: IChartProps = {
+  const data: ChartProps = {
     chartTitle: "Speed chart",
     lineChartData: [
       {
@@ -32,5 +26,5 @@ export function ProcessSpeedChart(process: ProcessItem) {
     ],
   };
 
-  return <Sparkline data={data} showLegend styles={sparklineStyles} />;
+  return <Sparkline data={data} showLegend />;
 }