Исправлена адаптивность шрифта в подсказке

This commit is contained in:
ts_salikhov 2022-10-13 13:58:44 +04:00
parent 3d98a2c6df
commit 61f3201ad5
4 changed files with 9 additions and 3 deletions

View File

@ -22,6 +22,7 @@ export type D3HorizontalCursorSettings<DataType extends BaseDataType> = {
style?: CSSProperties style?: CSSProperties
limit?: number limit?: number
lineStyle?: SVGProps<SVGLineElement> lineStyle?: SVGProps<SVGLineElement>
adaptiveTooltipSmall?: boolean
} }
export type D3HorizontalCursorProps<DataType extends BaseDataType> = D3HorizontalCursorSettings<DataType> & { export type D3HorizontalCursorProps<DataType extends BaseDataType> = D3HorizontalCursorSettings<DataType> & {
@ -72,6 +73,7 @@ const _D3HorizontalCursor = <DataType extends BaseDataType>({
style: _style = {}, style: _style = {},
limit = 2, limit = 2,
lineStyle: _lineStyle, lineStyle: _lineStyle,
adaptiveTooltipSmall = false,
data, data,
groups, groups,
@ -189,7 +191,7 @@ const _D3HorizontalCursor = <DataType extends BaseDataType>({
style={{ transition: 'opacity .1s ease-out', userSelect: fixed ? 'auto' : 'none' }} style={{ transition: 'opacity .1s ease-out', userSelect: fixed ? 'auto' : 'none' }}
> >
<div className={'tooltip-wrapper'}> <div className={'tooltip-wrapper'}>
<div className={`adaptive-tooltip tooltip ${position} ${className}`} <div className={`adaptive-tooltip ${adaptiveTooltipSmall ? 'adaptive-tooltip-small' : ''} 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'}>

View File

@ -142,6 +142,7 @@ export type D3MonitoringChartsProps<DataType extends BaseDataType> = Omit<React.
spaceBetweenGroups?: number spaceBetweenGroups?: number
/** Название графика для сохранения в базе */ /** Название графика для сохранения в базе */
chartName?: string chartName?: string
adaptiveTooltipSmall?: boolean
methods?: (value: { methods?: (value: {
setSettingsVisible: (visible: boolean) => void setSettingsVisible: (visible: boolean) => void
}) => void }) => void
@ -191,6 +192,7 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
dash, dash,
chartName, chartName,
methods, methods,
adaptiveTooltipSmall = false,
className = '', className = '',
...other ...other
@ -570,6 +572,7 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
spaceBetweenGroups={spaceBetweenGroups} spaceBetweenGroups={spaceBetweenGroups}
data={data} data={data}
height={height} height={height}
adaptiveTooltipSmall={adaptiveTooltipSmall}
/> />
</D3MouseZone> </D3MouseZone>
</svg> </svg>

View File

@ -302,6 +302,7 @@ const TelemetryView = memo(() => {
}, },
}} }}
height={'70vh'} height={'70vh'}
adaptiveTooltipSmall
/> />
</GridItem> </GridItem>
<GridItem col={'2'} row={'3'} colSpan={'7'}> <GridItem col={'2'} row={'3'} colSpan={'7'}>

View File

@ -141,13 +141,13 @@
} }
@media (max-width: 1310px) { @media (max-width: 1310px) {
.asb-d3-chart .adaptive-tooltip { .asb-d3-chart .adaptive-tooltip-small {
font-size: 7px; font-size: 7px;
} }
} }
@media (max-width: 1279px) { @media (max-width: 1279px) {
.asb-d3-chart .adaptive-tooltip { .asb-d3-chart .adaptive-tooltip-small {
font-size: 6px; font-size: 6px;
} }
} }