From 9d0ddc6f2173098368fec30982bea130385e899b Mon Sep 17 00:00:00 2001
From: ts_salikhov <ts.salikhov@digitaldrilling.ru>
Date: Tue, 6 Sep 2022 18:58:20 +0400
Subject: [PATCH] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B0=20=D1=88=D0=B8=D1=80=D0=B8=D0=BD=D0=B0=20?=
 =?UTF-8?q?=D0=B2=D1=81=D0=BF=D0=BB=D1=8B=D0=B2=D0=B0=D1=8E=D1=89=D0=B5?=
 =?UTF-8?q?=D0=B9=20=D0=BF=D0=BE=D0=B4=D1=81=D0=BA=D0=B0=D0=B7=D0=BA=D0=B8?=
 =?UTF-8?q?=20=D0=BD=D0=B0=20=D0=B3=D1=80=D0=B0=D1=84=D0=B8=D0=BA=D0=B5=20?=
 =?UTF-8?q?=D0=A2=D0=B5=D0=BB=D0=B5=D0=BC=D0=B5=D1=82=D1=80=D0=B8=D1=8F=20?=
 =?UTF-8?q?-=20=D0=9C=D0=BE=D0=BD=D0=B8=D1=82=D0=BE=D1=80=D0=B8=D0=BD?=
 =?UTF-8?q?=D0=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../d3/monitoring/D3HorizontalCursor.tsx      | 20 +++++-----
 .../d3/monitoring/D3MonitoringCharts.tsx      |  1 +
 src/styles/d3.less                            | 39 +++++++------------
 3 files changed, 26 insertions(+), 34 deletions(-)

diff --git a/src/components/d3/monitoring/D3HorizontalCursor.tsx b/src/components/d3/monitoring/D3HorizontalCursor.tsx
index eb1e7e2..afae24c 100644
--- a/src/components/d3/monitoring/D3HorizontalCursor.tsx
+++ b/src/components/d3/monitoring/D3HorizontalCursor.tsx
@@ -13,7 +13,7 @@ import '@styles/d3.less'
 type D3GroupRenderFunction<DataType> = (group: ChartGroup<DataType>, data: DataType[]) => ReactNode
 
 export type D3HorizontalCursorSettings<DataType> = {
-    width?: number
+    spaceBetweenGroups?: number
     height?: number
     render?: D3GroupRenderFunction<DataType>
     position?: D3TooltipPosition
@@ -62,7 +62,7 @@ const makeDefaultRender = <DataType,>(): D3GroupRenderFunction<DataType> => (gro
 )
 
 const _D3HorizontalCursor = <DataType,>({
-    width = 220,
+    spaceBetweenGroups = 30,
     height = 200,
     render = makeDefaultRender<DataType>(),
     position: _position = 'bottom',
@@ -178,19 +178,21 @@ const _D3HorizontalCursor = <DataType,>({
             {groups.map((_, i) => (
                 <foreignObject
                     key={`${i}`}
-                    width={width}
+                    width={sizes.groupWidth + spaceBetweenGroups}
                     height={height}
-                    x={sizes.groupLeft(i) + (sizes.groupWidth - width) / 2}
+                    x={sizes.groupLeft(i) - spaceBetweenGroups / 2}
                     y={tooltipY}
                     opacity={fixed || mouseState.visible ? 1 : 0}
                     pointerEvents={fixed ? 'all' : 'none'}
                     style={{ transition: 'opacity .1s ease-out', userSelect: fixed ? 'auto' : 'none' }}
                 >
-                    <div className={`adaptive-tooltip tooltip ${position} ${className}`}
-                         style={{height: 'auto', bottom: `${position === 'bottom' ? '0' : ''}`}}
-                    >
-                        <div className={'tooltip-content'}>
-                            {tooltipBodies[i]}
+                    <div className={'tooltip-wrapper'}>
+                        <div className={`adaptive-tooltip tooltip ${position} ${className}`}
+                             style={{height: 'auto', bottom: `${position === 'bottom' ? '0' : ''}`}}
+                        >
+                            <div className={'tooltip-content'}>
+                                {tooltipBodies[i]}
+                            </div>
                         </div>
                     </div>
                 </foreignObject>
diff --git a/src/components/d3/monitoring/D3MonitoringCharts.tsx b/src/components/d3/monitoring/D3MonitoringCharts.tsx
index a0b939e..078cb64 100644
--- a/src/components/d3/monitoring/D3MonitoringCharts.tsx
+++ b/src/components/d3/monitoring/D3MonitoringCharts.tsx
@@ -567,6 +567,7 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
                                     yAxis={yAxis}
                                     groups={groups}
                                     sizes={sizes}
+                                    spaceBetweenGroups={spaceBetweenGroups}
                                     data={data}
                                     height={height}
                                 />
diff --git a/src/styles/d3.less b/src/styles/d3.less
index 62ca5c7..c009c17 100644
--- a/src/styles/d3.less
+++ b/src/styles/d3.less
@@ -2,12 +2,17 @@
     width: 100%;
     height: 100%;
 
+    & .tooltip-wrapper {
+        display: flex;
+        justify-content: center;
+    }
+
     & .tooltip {
         @color: white;
         @bg-color: rgba(0, 0, 0, .75);
         @arrow-size: 8px;
 
-        width: 100%;
+        max-width: 100%;
         height: 100%;
     
         font-size: 13px;
@@ -109,51 +114,35 @@
         width: 100%;
         height: 100%;
     }
-
-    & .adaptive-tooltip {
-        left: 0;
-        right: 0;
-        margin: 0 auto;
-    }
 }
 
-@media (max-width: 1830px) {
+@media (max-width: 1800px) {
     .asb-d3-chart .adaptive-tooltip {
-        max-width: 190px;
-        font-size: 10px;
+        font-size: 11px;
     }
 }
 
 @media (max-width: 1600px) {
     .asb-d3-chart  .adaptive-tooltip {
-        max-width: 160px;
-        font-size: 8px;
+        font-size: 9px;
     }
 }
 
-@media (max-width: 1420px) {
+@media (max-width: 1440px) {
     .asb-d3-chart .adaptive-tooltip {
-        max-width: 140px;
-        font-size: 7px;
+        font-size: 8px;
         padding: 0;
     }
 }
 
-@media (max-width: 1300px) {
+@media (max-width: 1310px) {
     .asb-d3-chart .adaptive-tooltip {
-        max-width: 125px;
+        font-size: 7px;
     }
 }
 
-@media (max-width: 1200px) {
+@media (max-width: 1279px) {
     .asb-d3-chart .adaptive-tooltip {
-        max-width: 105px;
         font-size: 6px;
     }
-}
-
-@media (max-width: 1100px) {
-    .asb-d3-chart .adaptive-tooltip {
-        max-width: 90px;
-    }
 }
\ No newline at end of file