Merge pull request #59 from deriv-com/henry/adapt-to-chart-data-change-v3

fix: change data generation according to latest final api spec

Author: henry-deriv

src/components/Chart/Chart.tsx

@@ -10,22 +10,22 @@ export const TradeChart: React.FC = () => {
     triggerPopup(arg: () => void): void;
   }>(null);
 
-  // const historicalData = useMemo(() => {
-  //   const data = generateHistoricalCandles(100, 60);
-  //   return transformCandleData(data);
-  // }, []);
+  const historicalData1 = useMemo(() => {
+    const data = generateHistoricalCandles(100, 60);
+    return transformCandleData(data);
+  }, []);
 
   const historicalData = useMemo(() => {
     const data = generateHistoricalTicks('1HZ100V', 100);
     return transformTickData(data);
   }, []);
 
-  // const streamingData = useChartData({ 
-  //   useMockData: true,
-  //   instrumentId: '1HZ100V',
-  //   type: 'candle',
-  //   durationInSeconds: 60
-  // });
+  const streamingData1 = useChartData({ 
+    useMockData: true,
+    instrumentId: '1HZ100V',
+    type: 'candle',
+    durationInSeconds: 60
+  });
 
   const streamingData = useChartData({ 
     useMockData: true,
@@ -68,7 +68,7 @@ export const TradeChart: React.FC = () => {
           top: 76,
         }}
         leftMargin={80}
-        chartType="line"
+        chartType="line" // "line", "candles", "hollow"
         ticksHistory={historicalData}
         streamingData={streamingData}
       />

src/hooks/useChartData.ts

@@ -19,29 +19,30 @@ export const useChartData = ({
   type = "tick",
   durationInSeconds = 60,
 }: UseChartDataProps = {}) => {
-  const openTime = useRef(Math.floor(Date.now() / 1000));
+  const openTime = useRef(Date.now());
   const closeTime = useRef(openTime.current);
 
   const [data, setData] = useState(() => {
     if (type === "candle") {
       return transformCandleData({
+        instrument_id: instrumentId,
         candles: [
           {
-            openEpochMs: openTime.current,
+            open_epoch_ms: openTime.current.toString(),
             open: "911.5",
             high: "913.5",
             low: "909.8",
             close: "911.73",
-            closeEpochMs: closeTime.current,
+            close_epoch_ms: closeTime.current.toString(),
           },
         ],
       });
     } else {
       return transformTickData({
-        instrumentId,
+        instrument_id: instrumentId,
         ticks: [
           {
-            epochMs: Date.now(),
+            epoch_ms: Date.now().toString(),
             ask: "911.5",
             bid: "911.3",
             price: "911.4",
@@ -63,34 +64,35 @@ export const useChartData = ({
       const basePrice = 911.5 + change;
 
       if (type === "candle") {
-        // Increment closeEpochMs by 1 second
-        closeTime.current += 1;
+        // Increment close_epoch_ms by 1 second in milliseconds
+        closeTime.current += 1000;
 
-        // Check if closeEpochMs has reached the next candle period
-        if (closeTime.current >= openTime.current + durationInSeconds) {
-          // Increment openEpochMs by durationInSeconds
-          openTime.current += durationInSeconds;
+        // Check if close_epoch_ms has reached the next candle period
+        if (closeTime.current >= openTime.current + (durationInSeconds * 1000)) {
+          // Increment open_epoch_ms by durationInSeconds in milliseconds
+          openTime.current += (durationInSeconds * 1000);
         }
 
         const candleData = {
+          instrument_id: instrumentId,
           candles: [
             {
-              openEpochMs: openTime.current,
+              open_epoch_ms: openTime.current.toString(),
               open: basePrice.toString(),
               high: (basePrice + 2).toString(),
               low: (basePrice - 1.7).toString(),
               close: (basePrice + 0.23).toString(),
-              closeEpochMs: closeTime.current,
+              close_epoch_ms: closeTime.current.toString(),
             },
           ],
         };
         setData(transformCandleData(candleData));
       } else {
         const tickData = {
-          instrumentId,
+          instrument_id: instrumentId,
           ticks: [
             {
-              epochMs: Date.now(),
+              epoch_ms: Date.now().toString(),
               ask: (basePrice + 0.2).toString(),
               bid: (basePrice - 0.2).toString(),
               price: basePrice.toString(),

src/utils/__tests__/transformChartData.test.ts

@@ -3,18 +3,20 @@ import { transformCandleData, transformTickData } from '../transformChartData';
 describe('transformCandleData', () => {
   it('should transform single candle data to ohlc format', () => {
     const input = {
+      instrument_id: 'frxUSDJPY',
       candles: [{
-        openEpochMs: 1644825600,
+        open_epoch_ms: '1644825600000',
         open: '100',
         high: '110',
         low: '90',
         close: '105',
-        closeEpochMs: 1644829200
+        close_epoch_ms: '1644829200000'
       }]
     };
 
     const expected = {
       msg_type: 'ohlc',
+      instrument_id: 'frxUSDJPY',
       ohlc: {
         open_time: 1644825600,
         open: '100',
@@ -30,28 +32,30 @@ describe('transformCandleData', () => {
 
   it('should transform multiple candles data to candles format', () => {
     const input = {
+      instrument_id: 'frxUSDJPY',
       candles: [
         {
-          openEpochMs: 1644825600,
+          open_epoch_ms: '1644825600000',
           open: '100',
           high: '110',
           low: '90',
           close: '105',
-          closeEpochMs: 1644829200
+          close_epoch_ms: '1644829200000'
         },
         {
-          openEpochMs: 1644829200,
+          open_epoch_ms: '1644829200000',
           open: '105',
           high: '115',
           low: '95',
           close: '110',
-          closeEpochMs: 1644832800
+          close_epoch_ms: '1644832800000'
         }
       ]
     };
 
     const expected = {
       msg_type: 'candles',
+      instrument_id: 'frxUSDJPY',
       candles: [
         {
           open_time: 1644825600,
@@ -79,9 +83,9 @@ describe('transformCandleData', () => {
 describe('transformTickData', () => {
   it('should transform single tick data to tick format', () => {
     const input = {
-      instrumentId: 'R_100',
+      instrument_id: 'R_100',
       ticks: [{
-        epochMs: 1644825600000,
+        epoch_ms: '1644825600000',
         ask: '100.5',
         bid: '100.3',
         price: '100.4'
@@ -90,7 +94,7 @@ describe('transformTickData', () => {
 
     const expected = {
       msg_type: 'tick',
-      instrumentId: 'R_100',
+      instrument_id: 'R_100',
       tick: {
         epoch: 1644825600,
         ask: '100.5',
@@ -104,16 +108,16 @@ describe('transformTickData', () => {
 
   it('should transform multiple ticks data to history format', () => {
     const input = {
-      instrumentId: 'R_100',
+      instrument_id: 'R_100',
       ticks: [
         {
-          epochMs: 1644825600000,
+          epoch_ms: '1644825600000',
           ask: '100.5',
           bid: '100.3',
           price: '100.4'
         },
         {
-          epochMs: 1644825601000,
+          epoch_ms: '1644825601000',
           ask: '100.6',
           bid: '100.4',
           price: '100.5'
@@ -123,7 +127,7 @@ describe('transformTickData', () => {
 
     const expected = {
       msg_type: 'history',
-      instrumentId: 'R_100',
+      instrument_id: 'R_100',
       history: [
         {
           epoch: 1644825600,

src/utils/generateHistoricalData.ts

@@ -1,21 +1,28 @@
-export const generateHistoricalCandles = (count: number = 100, durationInSeconds: number = 60) => {
-  const currentTime = Math.floor(Date.now() / 1000); // Convert to seconds
+export const generateHistoricalCandles = (
+  count: number = 100,
+  durationInSeconds: number = 60,
+  instrumentId: string = "frxUSDJPY"
+) => {
+  const currentTime = Date.now();
+  const durationInMs = durationInSeconds * 1000;
+  
   const candles = Array.from({ length: count }, (_, index) => {
     const basePrice = 911.5 + (Math.random() * 10 - 5);
-    const timeOffset = (count - 1 - index) * durationInSeconds;
+    const timeOffset = (count - 1 - index) * durationInMs;
     const openTime = currentTime - timeOffset;
 
     return {
-      openEpochMs: openTime,
+      open_epoch_ms: openTime.toString(),
       open: basePrice.toString(),
       high: (basePrice + 2).toString(),
       low: (basePrice - 1.7).toString(),
       close: (basePrice + 0.23).toString(),
-      closeEpochMs: openTime + durationInSeconds
+      close_epoch_ms: (openTime + durationInMs).toString()
     };
   });
 
   return {
+    instrument_id: instrumentId,
     candles
   };
 };
@@ -27,15 +34,15 @@ export const generateHistoricalTicks = (instrumentId: string = '1HZ100', count:
     const timeOffset = (count - 1 - index) * 1000; // 1 second intervals
 
     return {
-      epochMs: (currentTime - timeOffset),
+      epoch_ms: (currentTime - timeOffset).toString(),
       ask: (basePrice + 0.2).toString(),
       bid: (basePrice - 0.2).toString(),
       price: basePrice.toString()
     };
   });
 
   return {
-    instrumentId,
+    instrument_id: instrumentId,
     ticks
   };
 };