From 4de0ed87f9de83dfa47b33b356f689f0f06ff88b Mon Sep 17 00:00:00 2001
From: Henry Hein <henry@regentmarkets.com>
Date: Thu, 20 Feb 2025 10:42:27 +0800
Subject: [PATCH] fix: contract details chart

---
 src/components/Chart/Chart.tsx                | 38 +++++------
 .../ChartErrorBoundary.tsx                    | 48 +++++++++++++
 .../ContractDetailsChart.tsx                  | 67 +++++++++++++++++++
 src/components/ContractDetailsChart/index.tsx | 13 ++++
 .../ContractDetailsPage.tsx                   |  9 ++-
 5 files changed, 151 insertions(+), 24 deletions(-)
 create mode 100644 src/components/ContractDetailsChart/ChartErrorBoundary.tsx
 create mode 100644 src/components/ContractDetailsChart/ContractDetailsChart.tsx
 create mode 100644 src/components/ContractDetailsChart/index.tsx

diff --git a/src/components/Chart/Chart.tsx b/src/components/Chart/Chart.tsx
index 7c9e468..3a408d8 100644
--- a/src/components/Chart/Chart.tsx
+++ b/src/components/Chart/Chart.tsx
@@ -1,8 +1,8 @@
 import React, { useRef, useMemo } from "react";
 import { SmartChart } from "./SmartChart";
 import { useChartData } from "@/hooks/useChartData";
-import { generateHistoricalTicks } from "@/utils/generateHistoricalData";
-import { transformTickData } from "@/utils/transformChartData";
+import { generateHistoricalCandles } from "@/utils/generateHistoricalData";
+import { transformCandleData } from "@/utils/transformChartData";
 
 export const TradeChart: React.FC = () => {
   const ref = useRef<{
@@ -10,30 +10,30 @@ export const TradeChart: React.FC = () => {
     triggerPopup(arg: () => void): void;
   }>(null);
 
-  // const historicalData = useMemo(() => {
-  //   const data = generateHistoricalCandles(100, 60);
-  //   return transformCandleData(data);
-  // }, []);
-
   const historicalData = useMemo(() => {
-    const data = generateHistoricalTicks('1HZ100V', 100);
-    return transformTickData(data);
+    const data = generateHistoricalCandles(100, 60);
+    return transformCandleData(data);
   }, []);
 
-  // const streamingData = useChartData({ 
-  //   useMockData: true,
-  //   instrumentId: '1HZ100V',
-  //   type: 'candle',
-  //   durationInSeconds: 60
-  // });
+  // const historicalData = useMemo(() => {
+  //   const data = generateHistoricalTicks('1HZ100V', 100);
+  //   return transformTickData(data);
+  // }, []);
 
   const streamingData = useChartData({ 
     useMockData: true,
     instrumentId: '1HZ100V',
-    type: 'tick',
-    durationInSeconds: 0
+    type: 'candle',
+    durationInSeconds: 60
   });
 
+  // const streamingData = useChartData({ 
+  //   useMockData: true,
+  //   instrumentId: '1HZ100V',
+  //   type: 'tick',
+  //   durationInSeconds: 0
+  // });
+
   return (
     <div style={{ display: "flex", height: "100%", position: "relative" }}>
       <SmartChart
@@ -54,7 +54,7 @@ export const TradeChart: React.FC = () => {
         requestForget={() => {}}
         requestForgetStream={() => {}}
         enabledChartFooter={false}
-        granularity={0}
+        granularity={60}
         isVerticalScrollEnabled
         isConnectionOpened
         clearChart={false}
@@ -68,7 +68,7 @@ export const TradeChart: React.FC = () => {
           top: 76,
         }}
         leftMargin={80}
-        chartType="line"
+        chartType="candles"
         ticksHistory={historicalData}
         streamingData={streamingData}
       />
diff --git a/src/components/ContractDetailsChart/ChartErrorBoundary.tsx b/src/components/ContractDetailsChart/ChartErrorBoundary.tsx
new file mode 100644
index 0000000..f67e2ce
--- /dev/null
+++ b/src/components/ContractDetailsChart/ChartErrorBoundary.tsx
@@ -0,0 +1,48 @@
+import { Component, ErrorInfo, ReactNode } from "react";
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+}
+
+export class ChartErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false,
+  };
+
+  public static getDerivedStateFromError(_: Error): State {
+    return { hasError: true };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error("Contract Details Chart Error:", error, errorInfo);
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      return (
+        <div className="flex-1 bg-white w-full rounded-lg relative h-full flex items-center justify-center">
+          <div className="text-center p-4">
+            <h2 className="text-lg font-semibold text-gray-800 mb-2">
+              Chart Error
+            </h2>
+            <p className="text-gray-600">
+              There was an error loading the contract details chart.
+            </p>
+            <button
+              className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+              onClick={() => this.setState({ hasError: false })}
+            >
+              Try Again
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
diff --git a/src/components/ContractDetailsChart/ContractDetailsChart.tsx b/src/components/ContractDetailsChart/ContractDetailsChart.tsx
new file mode 100644
index 0000000..36df19b
--- /dev/null
+++ b/src/components/ContractDetailsChart/ContractDetailsChart.tsx
@@ -0,0 +1,67 @@
+import React, { useRef, useMemo } from "react";
+import { SmartChart } from "@/components/Chart/SmartChart";
+import { useChartData } from "@/hooks/useChartData";
+import { generateHistoricalTicks } from "@/utils/generateHistoricalData";
+import { transformTickData } from "@/utils/transformChartData";
+
+export const ContractDetailsChart: React.FC = () => {
+  const ref = useRef<{
+    hasPredictionIndicators(): void;
+    triggerPopup(arg: () => void): void;
+  }>(null);
+
+  const historicalData = useMemo(() => {
+    const data = generateHistoricalTicks("1HZ100V", 100);
+    return transformTickData(data);
+  }, []);
+
+  const streamingData = useChartData({
+    useMockData: true,
+    instrumentId: "1HZ100V",
+    type: "tick",
+    durationInSeconds: 0,
+  });
+
+  return (
+    <div className="h-[400px] relative bg-white shadow-md rounded-lg">
+      <div className="absolute inset-0">
+        <SmartChart
+          ref={ref}
+          id="replay-chart"
+          barriers={[]}
+          chartStatusListener={(isChartReady: boolean) =>
+            console.log("isChartReady", isChartReady)
+          }
+          crosshair={0}
+          isLive
+          chartControlsWidgets={null}
+          requestSubscribe={() => {}}
+          toolbarWidget={() => <></>}
+          symbol={"R_10"}
+          topWidgets={() => <div />}
+          enabledNavigationWidget={false}
+          requestForget={() => {}}
+          requestForgetStream={() => {}}
+          enabledChartFooter={false}
+          granularity={0}
+          isVerticalScrollEnabled
+          isConnectionOpened
+          clearChart={false}
+          shouldFetchTradingTimes={false}
+          allowTickChartTypeOnly={false}
+          feedCall={{
+            activeSymbols: false,
+          }}
+          isMobile={false}
+          yAxisMargin={{
+            top: 76,
+          }}
+          leftMargin={80}
+          chartType="line"
+          ticksHistory={historicalData}
+          streamingData={streamingData}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/ContractDetailsChart/index.tsx b/src/components/ContractDetailsChart/index.tsx
new file mode 100644
index 0000000..444d5d4
--- /dev/null
+++ b/src/components/ContractDetailsChart/index.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import { ContractDetailsChart as BaseChart } from "./ContractDetailsChart";
+import { ChartErrorBoundary } from "./ChartErrorBoundary";
+
+const ContractDetailsChartWithErrorBoundary = (props: React.ComponentProps<typeof BaseChart>) => {
+  return (
+    <ChartErrorBoundary>
+      <BaseChart {...props} />
+    </ChartErrorBoundary>
+  );
+};
+
+export { ContractDetailsChartWithErrorBoundary as ContractDetailsChart };
diff --git a/src/screens/ContractDetailsPage/ContractDetailsPage.tsx b/src/screens/ContractDetailsPage/ContractDetailsPage.tsx
index 6ef4a46..932d540 100644
--- a/src/screens/ContractDetailsPage/ContractDetailsPage.tsx
+++ b/src/screens/ContractDetailsPage/ContractDetailsPage.tsx
@@ -1,7 +1,6 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useParams, useNavigate } from "react-router-dom";
-
-import { useEffect, useState } from "react";
+import { ContractDetailsChart } from "@/components/ContractDetailsChart";
 import axios from "axios";
 
 const ContractDetailsPage: React.FC = () => {
@@ -61,8 +60,8 @@ const ContractDetailsPage: React.FC = () => {
       {/* Order Details */}
       
       {/* Chart Space */}
-      <div className="min-h-[400px] bg-gray-200 flex items-center justify-center rounded-lg border-b border-gray-300">
-        <span className="text-gray-500">Chart space (empty)</span>
+      <div className="min-h-[400px] bg-white rounded-lg border-b border-gray-300">
+        <ContractDetailsChart />
       </div>
       <div className="mt-4 p-4 bg-white shadow-md rounded-lg border-b border-gray-300">
         <h2 className="text-md font-bold mb-4">Order details</h2>