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

This commit is contained in:
ts_salikhov 2022-10-19 14:05:32 +04:00
parent f336ceb698
commit 16ae6959cf
4 changed files with 4 additions and 41 deletions

View File

@ -22,7 +22,6 @@ 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> & {
@ -73,7 +72,6 @@ const _D3HorizontalCursor = <DataType extends BaseDataType>({
style: _style = {}, style: _style = {},
limit = 2, limit = 2,
lineStyle: _lineStyle, lineStyle: _lineStyle,
adaptiveTooltipSmall = false,
data, data,
groups, groups,
@ -191,7 +189,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 ${adaptiveTooltipSmall ? 'adaptive-tooltip-small' : ''} tooltip ${position} ${className}`} <div className={`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,7 +142,6 @@ 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
@ -192,7 +191,6 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
dash, dash,
chartName, chartName,
methods, methods,
adaptiveTooltipSmall = false,
className = '', className = '',
...other ...other
@ -572,7 +570,6 @@ 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,7 +302,6 @@ 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

@ -14,11 +14,11 @@
max-width: 100%; max-width: 100%;
height: 100%; height: 100%;
font-size: 13px; font-size: calc(7px + 6 * (100vw - 1024px) / 896);
color: @color; color: @color;
position: absolute; position: absolute;
padding: 5px; padding: calc(0px + 5 * (100vw - 1024px) / 896);
border: none; border: none;
border-radius: 2px; border-radius: 2px;
background-color: @bg-color; background-color: @bg-color;
@ -119,35 +119,4 @@
.grid-line:not(:first-of-type):not(:last-of-type) line { .grid-line:not(:first-of-type):not(:last-of-type) line {
stroke: #ddd; stroke: #ddd;
stroke-dasharray: 4; stroke-dasharray: 4;
}
@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-small {
font-size: 7px;
}
}
@media (max-width: 1279px) {
.asb-d3-chart .adaptive-tooltip-small {
font-size: 6px;
}
} }