ia.novokshanov/asb_cloud_front
1
0
Fork 0
forked from ddrilling/asb_cloud_front
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
ts_salikhov 2022-09-06 14:53:44 +04:00
parent cc1eb706ea
commit 0e6a0888d8
3 changed files with 39 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/d3/monitoring/D3HorizontalCursor.tsx
View File

@ -186,7 +186,7 @@ const _D3HorizontalCursor = <DataType,>({
pointerEvents={fixed ? 'all' : 'none'} pointerEvents={fixed ? 'all' : 'none'}
style={{ transition: 'opacity .1s ease-out', userSelect: fixed ? 'auto' : 'none' }} style={{ transition: 'opacity .1s ease-out', userSelect: fixed ? 'auto' : 'none' }}
> >
<div className={`tooltip ${position} ${className}`} <div className={`adaptive-tooltip tooltip ${position} ${className}`}
style={{height: 'auto', bottom: `${position === 'bottom' ? '0' : ''}`}} style={{height: 'auto', bottom: `${position === 'bottom' ? '0' : ''}`}}
> >
<div className={'tooltip-content'}> <div className={'tooltip-content'}>

2
src/pages/Telemetry/Archive/index.jsx
View File

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

58
src/styles/d3.less
View File

@ -9,10 +9,6 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
left: 0;
right: 0;
margin: 0 auto;
font-size: 13px; font-size: 13px;
color: @color; color: @color;
@ -113,31 +109,51 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
& .adaptive-tooltip {
left: 0;
right: 0;
margin: 0 auto;
}
} }
@media (max-width: 1800px) { @media (max-width: 1830px) {
.asb-d3-chart { .asb-d3-chart .adaptive-tooltip {
& .tooltip { max-width: 190px;
width: 190px; font-size: 10px;
font-size: 10px;
}
} }
} }
@media (max-width: 1600px) { @media (max-width: 1600px) {
.asb-d3-chart { .asb-d3-chart .adaptive-tooltip {
& .tooltip { max-width: 160px;
width: 160px; font-size: 8px;
font-size: 8px;
}
} }
} }
@media (max-width: 1400px) { @media (max-width: 1420px) {
.asb-d3-chart { .asb-d3-chart .adaptive-tooltip {
& .tooltip { max-width: 140px;
width: 140px; font-size: 7px;
font-size: 7px; padding: 0;
} }
}
@media (max-width: 1300px) {
.asb-d3-chart .adaptive-tooltip {
max-width: 125px;
}
}
@media (max-width: 1200px) {
.asb-d3-chart .adaptive-tooltip {
max-width: 105px;
font-size: 6px;
}
}
@media (max-width: 1100px) {
.asb-d3-chart .adaptive-tooltip {
max-width: 90px;
} }
} }