Merged in feature/fix-tooltip-width (pull request #8)

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

Approved-by: Александр Васильевич Сироткин

src/components/d3/monitoring/D3HorizontalCursor.tsx

@@ -28,6 +28,7 @@ export type D3HorizontalCursorProps<DataType> = D3HorizontalCursorSettings<DataT
     data: DataType[]
     sizes: ChartSizes
     yAxis?: d3.ScaleTime<number, number>
+    spaceBetweenGroups?: number
 }
 
 const defaultLineStyle: SVGProps<SVGLineElement> = {
@@ -62,7 +63,7 @@ const makeDefaultRender = <DataType,>(): D3GroupRenderFunction<DataType> => (gro
 )
 
 const _D3HorizontalCursor = <DataType,>({
-    width = 220,
+    spaceBetweenGroups = 30,
     height = 200,
     render = makeDefaultRender<DataType>(),
     position: _position = 'bottom',
@@ -178,19 +179,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={`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>

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}
                                 />

src/pages/Telemetry/Archive/index.jsx

@@ -255,7 +255,6 @@ const Archive = memo(() => {
                 plugins={{
                     menu: { enabled: false },
                     cursor: {
-                        width: 220,
                         render: cursorRender,
                     }
                 }}

src/pages/Telemetry/TelemetryView/index.jsx

@@ -295,7 +295,6 @@ const TelemetryView = memo(() => {
             plugins={{
               menu: { enabled: false },
               cursor: {
-                width: 220,
                 render: cursorRender,
               },
             }}

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;
@@ -110,3 +115,34 @@
         height: 100%;
     }
 }
+
+@media (max-width: 1800px) {
+    .asb-d3-chart .adaptive-tooltip {
+        font-size: 11px;
+    }
+}
+
+@media (max-width: 1600px) {
+    .asb-d3-chart  .adaptive-tooltip {
+        font-size: 9px;
+    }
+}
+
+@media (max-width: 1440px) {
+    .asb-d3-chart .adaptive-tooltip {
+        font-size: 8px;
+        padding: 0;
+    }
+}
+
+@media (max-width: 1310px) {
+    .asb-d3-chart .adaptive-tooltip {
+        font-size: 7px;
+    }
+}
+
+@media (max-width: 1279px) {
+    .asb-d3-chart .adaptive-tooltip {
+        font-size: 6px;
+    }
+}