графики в мобилке

maksim-zakharov · Jul 31, 2024 · 066e1f6 · 066e1f6
1 parent 90165d5
commit 066e1f6
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 10 deletions.
diff --git a/src/common/TVChart.tsx b/src/common/TVChart.tsx
@@ -143,7 +143,7 @@ const {
                 const timeCandleMap = new Map(data.map(d => [d.time, d]));
 
                 const toolTip: any = document.createElement('div');
-                toolTip.style =`position: absolute; display: none; z-index: 1000; top: 12px; left: 12px;`;
+                toolTip.style =`position: absolute; display: none; z-index: 1000; top: 12px; left: 12px; right: 66px;`;
                     chartContainerRef!.current.appendChild(toolTip);
 
                 // toolTip.innerHTML = '123'
@@ -293,7 +293,7 @@ const {
 
             series?.setData(data);
 
-            if(markers){
+            if(markers && markers.length > 0){
                 const firstBuy: any = markers.find(p => p.position === 'belowBar');
                 const firstSell: any = markers.find(p => p.position === 'aboveBar');
 

diff --git a/src/index.less b/src/index.less
@@ -2102,6 +2102,7 @@ html.dark .container > div.qty.negative, html.dark .container > div.loss-or-prof
 
 .description-container h3 {
   margin: 0;
+  margin-top: 16px;
 }
 
 .ant-tabs-tab[data-node-key="null"] {

diff --git a/src/pages/Diary/Diary.tsx b/src/pages/Diary/Diary.tsx
@@ -66,7 +66,7 @@ import {
     useGetMoneyMovesQuery,
     useGetNewsQuery,
     useGetOperationCodeMutation,
-    useGetSecuritiesMutation,
+    useGetSecuritiesMutation, useGetSecurityByExchangeAndSymbolQuery,
     useGetSummaryQuery,
     useSignOperationMutation
 } from "../../api/alor.api";
@@ -75,6 +75,7 @@ import Spinner from "../../common/Spinner";
 import Title from "antd/es/typography/Title";
 import ASelect from "../../common/Select";
 import OperationsDrawer from "./components/OperationsDrawer";
+import Chart from "./components/Chart";
 
 interface DataType {
     key: string;
@@ -580,11 +581,19 @@ const Diary: FC<IProps> = ({
         setSearchParams(searchParams);
     }
 
+    const darkColors = useAppSelector(state => state.alorSlice.darkColors);
     const {data: description} = useGetDescriptionQuery({
         ticker: showSymbolModal
     }, {
         skip: !showSymbolModal
-    });
+    });const {data: security} = useGetSecurityByExchangeAndSymbolQuery({
+            symbol: showSymbolModal,
+            exchange: "MOEX",
+        },
+        {
+            skip:  !showSymbolModal
+        });
+    const digits = useMemo(() => security ? `${security.minstep}`.split('.')[1]?.length : 0, [security]);
     const {data: dividendsData, error: dividendsError} = useGetDividendsQuery({
         ticker: showSymbolModal
     }, {
@@ -1398,6 +1407,19 @@ const Diary: FC<IProps> = ({
                 <Tabs activeKey={symbolTab} onTabClick={onHandleSelectSymbolTab}>
                     <Tabs.TabPane tab="Обзор" key="description">
                         <div className="description-container">
+                            <Chart
+                                colors={nightMode && darkColors}
+                                trades={data.positions
+                                    .filter(p => p.symbol === showSymbolModal)
+                                    .map(p => p.trades).flat()
+                                    .filter(p => p.symbol === showSymbolModal)
+                            }
+                                symbol={showSymbolModal}
+                                digits={digits}
+                                security={security}
+                                from={moment().add(-8, 'hour').toISOString()}
+                                to={moment().toISOString()}
+                            />
                             <h3>О компании</h3>
                             <p>
                                 {description?.description}

diff --git a/src/pages/Diary/components/Chart.tsx b/src/pages/Diary/components/Chart.tsx
@@ -23,7 +23,6 @@ function timeToLocal(originalTime: number) {
 
 const Chart: FC<IProps> = ({security, symbol, digits, from, to, trades, colors = {}}) => {
 
-    const api = useAppSelector(state => state.alorSlice.api);
     const currentTimeframe = Timeframe.Min5;
 
     const entriesTrades = Object.entries(trades.reduce((acc, curr) => {
@@ -49,6 +48,9 @@ const Chart: FC<IProps> = ({security, symbol, digits, from, to, trades, colors =
         return timeToLocal(roundedTime) as UTCTimestamp
     }
 
+    const fromDate = useMemo(() => new Date(from), [from]);
+    const toDate = useMemo(() => new Date(to), [to]);
+
     const markers: SeriesMarker<Time>[] = useMemo(() => entriesTrades.map(t => ({
         time: roundTime(t.date),
         position: t.side === Side.Buy ? 'belowBar' : 'aboveBar',
@@ -59,17 +61,17 @@ const Chart: FC<IProps> = ({security, symbol, digits, from, to, trades, colors =
         value: t.price,
         size: 2
         // text: `${t.side === Side.Buy ? 'Buy' : 'Sell'} ${t.qty} lots by ${t.price}`
-    })), [entriesTrades])
+    }))
+        .filter(t => t.time * 1000 >= fromDate.getTime())
+        , [entriesTrades, fromDate, toDate])
 
     const {data} = useGetHistoryQuery({
         symbol,
         exchange: "MOEX",
         // @ts-ignore
         tf: currentTimeframe,
-        from: fromTo('-0.5d', new Date(from)).from,
-        to: fromTo('0.5d', new Date(to)).to,
-    }, {
-        skip: !api
+        from: fromTo('-0.5d', fromDate).from,
+        to: fromTo('0.5d', toDate).to,
     });
 
     const history = data?.history || [];