Исправлена ширина всплывающей подсказки на графике Телеметрия - Мониторинг

src/components/d3/monitoring/D3HorizontalCursor.tsx

@@ -30,24 +30,6 @@ 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',
@@ -104,8 +86,6 @@ 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)
 
@@ -191,24 +171,6 @@ 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}
@@ -217,9 +179,9 @@ const _D3HorizontalCursor = <DataType,>({
             {groups.map((_, i) => (
                 <foreignObject
                     key={`${i}`}
-                    width={tooltipWidth}
+                    width={width}
                     height={height}
-                    x={sizes.groupLeft(i) + (sizes.groupWidth - tooltipWidth) / 2}
+                    x={sizes.groupLeft(i) + (sizes.groupWidth - width) / 2}
                     y={tooltipY}
                     opacity={fixed || mouseState.visible ? 1 : 0}
                     pointerEvents={fixed ? 'all' : 'none'}
@@ -228,7 +190,7 @@ const _D3HorizontalCursor = <DataType,>({
                     <div className={`tooltip ${position} ${className}`}
                          style={{height: 'auto', bottom: `${position === 'bottom' ? '0' : ''}`}}
                     >
-                        <div className={'tooltip-content'} style={{fontSize: fontSize}}>
+                        <div className={'tooltip-content'}>
                             {tooltipBodies[i]}
                         </div>
                     </div>

src/styles/d3.less

@@ -9,6 +9,10 @@
 
         width: 100%;
         height: 100%;
+
+        left: 0;
+        right: 0;
+        margin: 0 auto;
     
         font-size: 13px;
         color: @color;
@@ -110,3 +114,30 @@
         height: 100%;
     }
 }
+
+@media (max-width: 1800px) {
+    .asb-d3-chart {
+        & .tooltip {
+            width: 190px;
+            font-size: 10px;
+        }
+    }
+}
+
+@media (max-width: 1600px) {
+    .asb-d3-chart {
+        & .tooltip {
+            width: 160px;
+            font-size: 8px;
+        }
+    }
+}
+
+@media (max-width: 1400px) {
+    .asb-d3-chart {
+        & .tooltip {
+            width: 140px;
+            font-size: 7px;
+        }
+    }
+}