From 7e28fe81378357e00f8bbf28efb56c3786eab778 Mon Sep 17 00:00:00 2001
From: Navaneeth Rao <32010211+navaneeth-dev@users.noreply.github.com>
Date: Sat, 25 Jan 2025 17:44:18 +0530
Subject: [PATCH] Updated opsGraph to recharts

Signed-off-by: Navaneeth Rao <32010211+navaneeth-dev@users.noreply.github.com>
---
 .../operationDetailsTable/opsGraph.tsx        | 43 +++++++------------
 1 file changed, 16 insertions(+), 27 deletions(-)

diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/opsGraph.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/opsGraph.tsx
index 08e1cc2ac1..91be16a509 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/opsGraph.tsx
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/opsGraph.tsx
@@ -13,12 +13,7 @@
 // limitations under the License.
 
 import * as React from 'react';
-import {
-  XYPlot,
-  AreaSeries,
-  LineSeries,
-  // @ts-ignore
-} from 'react-vis';
+import { AreaChart, Area, ResponsiveContainer, YAxis } from 'recharts';
 import { ApiError } from '../../../../types/api-error';
 import { Points } from '../../../../types/metrics';
 
@@ -51,34 +46,28 @@ export class OperationsGraph extends React.PureComponent<TProps> {
     }
 
     const dynProps: {
-      yDomain?: yDomain;
+      domain?: yDomain;
     } = {};
 
     if (yDomain) {
-      dynProps.yDomain = yDomain;
+      dynProps.domain = yDomain;
     }
 
     return (
       <div className="ops-container">
-        <XYPlot
-          margin={{
-            left: 0,
-            right: 0,
-            bottom: 1,
-            top: 2,
-          }}
-          width={100}
-          height={15}
-        >
-          <AreaSeries
-            className="area-series-example ops-graph-style"
-            curve="curveLinear"
-            color={color}
-            data={dataPoints}
-            {...dynProps}
-          />
-          <LineSeries className="area-elevated-line-series" color={color} data={dataPoints} {...dynProps} />
-        </XYPlot>
+        <ResponsiveContainer width={100} height={15}>
+          <AreaChart
+            margin={{
+              left: 0,
+              right: 0,
+              bottom: 0,
+              top: 0,
+            }}
+            data={dataPoints}>
+            <YAxis hide={true} {...dynProps} />
+            <Area type="step" dataKey="y" stroke="none" fill={color} fillOpacity={1} baseValue={0.1} />
+          </AreaChart>
+        </ResponsiveContainer>
       </div>
     );
   }