feat(debug-console): integrate dxscript code editor and align chart c…

dxlink-javascript/dxlink-docs/package.json

@@ -11,13 +11,11 @@
   },
   "dependencies": {
     "@asyncapi/react-component": "2.5.0",
-    "@devexperts/dxcharts-lite": "2.5.3",
     "@dxfeed/dxlink-api": "*",
     "@dxfeed/ui-kit": "2.15.2",
-    "@dxscript/js-samples": "^1.5.0",
-    "ace-builds": "1.35.4",
+    "@dxscript/dxlink-dxcharts-lite": "^1.11.2",
+    "@dxscript/dxlink-dxscript-editor": "^1.11.2",
     "react": "^18.2.0",
-    "react-ace": "12.0.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "react-router-dom": "^6.5.0",

dxlink-javascript/dxlink-docs/src/debug-console/candles-channel-manager.tsx

@@ -1,14 +1,14 @@
-import { createChart, Chart } from '@devexperts/dxcharts-lite'
+import type { DXLinkIndiChartCandle } from '@dxfeed/dxlink-api'
 import { unit } from '@dxfeed/ui-kit/utils'
+import { IndiChart, type IndiChartHandle } from '@dxscript/dxlink-dxcharts-lite'
 import { useEffect, useRef, useState } from 'react'
 import styled from 'styled-components'
 
-import { candleChartColors } from './candles-chart'
 import { CandlesSubscription } from './candles-subscription'
-import type { DXLinkCandleData, DXLinkCandles } from '../candles/candles'
+import type { DXLinkCandleData, DXLinkCandleEvent, DXLinkCandles, DXLinkCandleSubscription } from '../candles/candles'
 import { ContentTemplate } from '../common/content-template'
 
-const ChartContainer = styled.div`
+const ChartContainer = styled(IndiChart)`
   width: 100%;
   height: 400px;
   border: 1px solid ${({ theme }) => theme.palette.separator.primary};
@@ -33,78 +33,61 @@ interface CandlesChannelManagerProps {
   channel: DXLinkCandles
 }
 
+const toIndiChartCandle = (event: Readonly<DXLinkCandleEvent>): DXLinkIndiChartCandle => ({
+  eventSymbol: event.eventSymbol,
+  index: event.index,
+  time: event.time,
+  open: event.open,
+  high: event.high,
+  low: event.low,
+  close: event.close,
+  volume: event.volume,
+})
+
 export function CandlesChannelManager({ channel }: CandlesChannelManagerProps) {
   const [data, setData] = useState<DXLinkCandleData>()
-  const [chart, setChart] = useState<Chart>()
+  const [chartResetKey, setChartResetKey] = useState(0)
+  const ref = useRef<IndiChartHandle>(null)
 
-  const ref = useRef<HTMLDivElement>(null)
+  const handleSet = (subscription: DXLinkCandleSubscription) => {
+    setChartResetKey((k) => k + 1)
+    channel.setSubscription(subscription)
+  }
 
   useEffect(() => {
-    const chartInstance = createChart(ref.current!, {
-      colors: candleChartColors,
-      components: {
-        waterMark: {
-          visible: true,
-        },
-      },
-    })
-
     channel.addListener(setData)
 
-    setChart(chartInstance)
-
     return () => {
-      chartInstance.destroy()
       channel.removeListener(setData)
     }
   }, [channel])
 
   useEffect(() => {
-    if (!data || !chart) {
-      return
-    }
-
-    const candles = data.events.map((event) => ({
-      hi: Number(event.high),
-      lo: Number(event.low),
-      open: Number(event.open),
-      close: Number(event.close),
-      timestamp: event.time,
-      volume: Number(event.volume),
-      idx: event.index,
-    }))
-
-    // If it's a snapshot, we need to set data instead of updating it
-    if (data.isSnapshot) {
-      const symbol = data?.events[0]?.eventSymbol ?? 'N/A'
-
-      chart.watermarkComponent.setWaterMarkData({
-        firstRow: symbol,
-      })
-
-      chart.setData({
-        candles,
-        instrument: {
-          symbol,
-        },
-      })
+    if (!data) {
       return
     }
 
-    chart.updateData({
-      candles,
-    })
-  }, [data, chart])
+    const candles = data.events.map(toIndiChartCandle)
+    ref.current?.pushData(candles, [], data.isSnapshot ? 'candles' : 'update')
+  }, [data])
 
   return (
     <>
       <Group>
-        <CandlesSubscription onSet={channel.setSubscription} />{' '}
+        <CandlesSubscription onSet={handleSet} />{' '}
       </Group>
 
       <ChartGroup available={data !== undefined}>
         <ContentTemplate title={'Chart'}>
-          <ChartContainer ref={ref} />
+          <ChartContainer
+            ref={ref}
+            resetKey={chartResetKey}
+            onIndicatorError={(chartError) => {
+              if (chartError) {
+                console.error(chartError)
+              }
+            }}
+          />
           <Powered>
             Chart powered by{' '}
             <a href="https://devexperts.com/dxcharts/" target="_blank" rel="noreferrer">