From bc8dbaf113d9fc6df73765d10ef72962d21b7774 Mon Sep 17 00:00:00 2001
From: ts_salikhov <ts.salikhov@digitaldrilling.ru>
Date: Mon, 5 Sep 2022 17:17:39 +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      | 45 +++++++++++++++++--
 src/pages/Telemetry/TelemetryView/index.jsx   |  2 +-
 2 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/src/components/d3/monitoring/D3HorizontalCursor.tsx b/src/components/d3/monitoring/D3HorizontalCursor.tsx
index af75ff0..2440e63 100644
--- a/src/components/d3/monitoring/D3HorizontalCursor.tsx
+++ b/src/components/d3/monitoring/D3HorizontalCursor.tsx
@@ -30,6 +30,25 @@ export type D3HorizontalCursorProps<DataType> = D3HorizontalCursorSettings<DataT
     yAxis?: d3.ScaleTime<number, number>
 }
 
+enum FontSize {
+    inherit = 'inherit',
+    large = '10px',
+    medium = '8px',
+    small = '7px',
+}
+
+enum TooltipWidth {
+    large = 190,
+    medium = 160,
+    small = 140,
+}
+
+enum InnerWidth {
+    large = 1800,
+    medium = 1600,
+    small = 1400,
+}
+
 const defaultLineStyle: SVGProps<SVGLineElement> = {
     stroke: 'black',
 }
@@ -85,6 +104,8 @@ const _D3HorizontalCursor = <DataType,>({
     const [tooltipY, setTooltipY] = useState(0)
     const [fixed, setFixed] = useState(false)
     const [lineY, setLineY] = useState(0)
+    const [tooltipWidth, setTooltipWidth] = useState(width)
+    const [fontSize, setFontSize] = useState(FontSize.inherit)
 
     const lineStyle = usePartialProps(_lineStyle, defaultLineStyle)
 
@@ -170,6 +191,24 @@ const _D3HorizontalCursor = <DataType,>({
         setTooltipBodies(bodies)
     }, [groups, data, yAxis, lineY, fixed, mouseState.visible])
 
+    useEffect(() => {
+        const innerWidth = window.innerWidth
+
+        if (innerWidth < InnerWidth.small) {
+            setTooltipWidth(TooltipWidth.small)
+            setFontSize(FontSize.small)
+        } else if (innerWidth < InnerWidth.medium) {
+            setTooltipWidth(TooltipWidth.medium)
+            setFontSize(FontSize.medium)
+        } else if (innerWidth < InnerWidth.large) {
+            setTooltipWidth(TooltipWidth.large)
+            setFontSize(FontSize.large)
+        } else {
+            setTooltipWidth(width)
+            setFontSize(FontSize.inherit)
+        }
+    }, [window.innerWidth])
+
     return (
         <g
             ref={zoneRef}
@@ -178,9 +217,9 @@ const _D3HorizontalCursor = <DataType,>({
             {groups.map((_, i) => (
                 <foreignObject
                     key={`${i}`}
-                    width={width}
+                    width={tooltipWidth}
                     height={height}
-                    x={sizes.groupLeft(i) + (sizes.groupWidth - width) / 2}
+                    x={sizes.groupLeft(i) + (sizes.groupWidth - tooltipWidth) / 2}
                     y={tooltipY}
                     opacity={fixed || mouseState.visible ? 1 : 0}
                     pointerEvents={fixed ? 'all' : 'none'}
@@ -189,7 +228,7 @@ const _D3HorizontalCursor = <DataType,>({
                     <div className={`tooltip ${position} ${className}`}
                          style={{height: 'auto', bottom: `${position === 'bottom' ? '0' : ''}`}}
                     >
-                        <div className={'tooltip-content'}>
+                        <div className={'tooltip-content'} style={{fontSize: fontSize}}>
                             {tooltipBodies[i]}
                         </div>
                     </div>
diff --git a/src/pages/Telemetry/TelemetryView/index.jsx b/src/pages/Telemetry/TelemetryView/index.jsx
index 884b23c..bb9b144 100755
--- a/src/pages/Telemetry/TelemetryView/index.jsx
+++ b/src/pages/Telemetry/TelemetryView/index.jsx
@@ -295,7 +295,7 @@ const TelemetryView = memo(() => {
             plugins={{
               menu: { enabled: false },
               cursor: {
-                width: 220,
+                width: 230,
                 render: cursorRender,
               },
             }}