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 18:58:20 +04:00
parent 0e6a0888d8
commit 9d0ddc6f21
3 changed files with 26 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,7 +13,7 @@ import '@styles/d3.less'
type D3GroupRenderFunction<DataType> = (group: ChartGroup<DataType>, data: DataType[]) => ReactNode type D3GroupRenderFunction<DataType> = (group: ChartGroup<DataType>, data: DataType[]) => ReactNode
export type D3HorizontalCursorSettings<DataType> = { export type D3HorizontalCursorSettings<DataType> = {
width?: number spaceBetweenGroups?: number
height?: number height?: number
render?: D3GroupRenderFunction<DataType> render?: D3GroupRenderFunction<DataType>
position?: D3TooltipPosition position?: D3TooltipPosition
@ -62,7 +62,7 @@ const makeDefaultRender = <DataType,>(): D3GroupRenderFunction<DataType> => (gro
) )
const _D3HorizontalCursor = <DataType,>({ const _D3HorizontalCursor = <DataType,>({
width = 220, spaceBetweenGroups = 30,
height = 200, height = 200,
render = makeDefaultRender<DataType>(), render = makeDefaultRender<DataType>(),
position: _position = 'bottom', position: _position = 'bottom',
@ -178,19 +178,21 @@ const _D3HorizontalCursor = <DataType,>({
{groups.map((_, i) => ( {groups.map((_, i) => (
<foreignObject <foreignObject
key={`${i}`} key={`${i}`}
width={width} width={sizes.groupWidth + spaceBetweenGroups}
height={height} height={height}
x={sizes.groupLeft(i) + (sizes.groupWidth - width) / 2} x={sizes.groupLeft(i) - spaceBetweenGroups / 2}
y={tooltipY} y={tooltipY}
opacity={fixed || mouseState.visible ? 1 : 0} opacity={fixed || mouseState.visible ? 1 : 0}
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={`adaptive-tooltip tooltip ${position} ${className}`} <div className={'tooltip-wrapper'}>
style={{height: 'auto', bottom: `${position === 'bottom' ? '0' : ''}`}} <div className={`adaptive-tooltip tooltip ${position} ${className}`}
> style={{height: 'auto', bottom: `${position === 'bottom' ? '0' : ''}`}}
<div className={'tooltip-content'}> >
{tooltipBodies[i]} <div className={'tooltip-content'}>
{tooltipBodies[i]}
</div>
</div> </div>
</div> </div>
</foreignObject> </foreignObject>

1
src/components/d3/monitoring/D3MonitoringCharts.tsx
View File

@ -567,6 +567,7 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
yAxis={yAxis} yAxis={yAxis}
groups={groups} groups={groups}
sizes={sizes} sizes={sizes}
spaceBetweenGroups={spaceBetweenGroups}
data={data} data={data}
height={height} height={height}
/> />

39
src/styles/d3.less
View File

@ -2,12 +2,17 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
& .tooltip-wrapper {
display: flex;
justify-content: center;
}
& .tooltip { & .tooltip {
@color: white; @color: white;
@bg-color: rgba(0, 0, 0, .75); @bg-color: rgba(0, 0, 0, .75);
@arrow-size: 8px; @arrow-size: 8px;
width: 100%; max-width: 100%;
height: 100%; height: 100%;
font-size: 13px; font-size: 13px;
@ -109,51 +114,35 @@
width: 100%; width: 100%;
height: 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 { .asb-d3-chart .adaptive-tooltip {
max-width: 190px; font-size: 11px;
font-size: 10px;
} }
} }
@media (max-width: 1600px) { @media (max-width: 1600px) {
.asb-d3-chart .adaptive-tooltip { .asb-d3-chart .adaptive-tooltip {
max-width: 160px; font-size: 9px;
font-size: 8px;
} }
} }
@media (max-width: 1420px) { @media (max-width: 1440px) {
.asb-d3-chart .adaptive-tooltip { .asb-d3-chart .adaptive-tooltip {
max-width: 140px; font-size: 8px;
font-size: 7px;
padding: 0; padding: 0;
} }
} }
@media (max-width: 1300px) { @media (max-width: 1310px) {
.asb-d3-chart .adaptive-tooltip { .asb-d3-chart .adaptive-tooltip {
max-width: 125px; font-size: 7px;
} }
} }
@media (max-width: 1200px) { @media (max-width: 1279px) {
.asb-d3-chart .adaptive-tooltip { .asb-d3-chart .adaptive-tooltip {
max-width: 105px;
font-size: 6px; font-size: 6px;
} }
}
@media (max-width: 1100px) {
.asb-d3-chart .adaptive-tooltip {
max-width: 90px;
}
} }