[Feature] relative length units in the tooltip

[sirAbramstone]

What problem does this feature solve?

In our low-code platform we allow users to set relative length units (such as rem & em) for any component of a chart (Legend, Axis, etc) - mostly for options that set font size. In previous major version of echarts we've been reached this with some tricky hacks with DOM, because, as we know, echarts allows us to use only numbers. But not so long ago we upgraded to version 5 and recently I noticed that now we can use relative units without any hacks as-is (btw, you didn't mention that in the official documentation). And then I found that we can do that in any component, except Tooltip. Tooltip just gets our relative units and concats them with "px" string. And we've been compelled to return to old tricks with DOM.

What does the proposed API look like?

Can we expect Tooltip to support relative length units? AFAIC all that need to do - tests given value and concat it with "px", like you do before, if it is number, and do nothing if it is string with some units.

[helgasoft]

Seems to be more of a [Bug} than a [Feature].
Do you have any sample code? Or maybe the exact source line you found where "px" is appended ?
Could be an easy PR fix.

[sirAbramstone]

Seems to be more of a [Bug} than a [Feature]. Do you have any sample code? Or maybe the exact source line you found where "px" is appended ? Could be an easy PR fix.

I've found that it happens here when the arg renderMode is 'html':

echarts/src/component/tooltip/tooltipMarkup.ts

Line 46 in 8120aab

function getTooltipTextStyle(

Yeah, maybe I should create a PR and fix it

[susiwen8]

maybe I should create a PR and fix it
Great ,Pr is much welcome

[helgasoft]

@sirAbramstone, great catch! Here is proposed code for your PR.

function getTooltipTextStyle(
    textStyle: TooltipOption['textStyle'],
    renderMode: TooltipRenderMode
): {
    nameStyle: TextStyle
    valueStyle: TextStyle
} {
    const nameFontColor = textStyle.color || '#6e7079';
    const nameFontSize = textStyle.fontSize || '12px';
    const nameFontWeight = textStyle.fontWeight || '400';
    const valueFontColor = textStyle.color || '#464646';
    const valueFontSize = textStyle.fontSize || '14px';
    const valueFontWeight = textStyle.fontWeight || '900';

    if (renderMode === 'html') {
        // `textStyle` is probably from user input, should be encoded to reduce security risk.
        return {
            // eslint-disable-next-line max-len
            nameStyle:  `font-size:${encodeHTML(nameFontSize +'')}; color:${encodeHTML(nameFontColor)}; font-weight:${encodeHTML(nameFontWeight +'')}`,
            valueStyle: `font-size:${encodeHTML(valueFontSize +'')};color:${encodeHTML(valueFontColor)};font-weight:${encodeHTML(valueFontWeight +'')}`
        }
    }
    return {
        nameStyle: {
	    fontSize: nameFontSize,
	    fill: nameFontColor,
	    fontWeight: nameFontWeight
	},
	valueStyle: {
	    fontSize: valueFontSize,
	    fill: valueFontColor,
	    fontWeight: valueFontWeight
	}
    };
}

[sirAbramstone]

@helgasoft unfortunately, this proposal breaks the tooltip if fontSize is passed as a number. I think we should test the given value for common units and append 'px' only if test fails or if the value is just a number.

[helgasoft]

hm, what code line is wrong? I think one can pass numbers(15) or relative length units ('1.2em').
For renderMode === 'html' they are all converted to strings anyway.

[sirAbramstone]

CSS considers a value without units as invalid for properties like font-size:

[helgasoft]

ok, I finally get it - function also has to fix/adjust font-size if user submits it numeric as requested by ECharts.

function getTooltipTextStyle(
    textStyle: TooltipOption['textStyle'],
    renderMode: TooltipRenderMode
): {
    nameStyle: TextStyle
    valueStyle: TextStyle
} {
    const nameFontColor = textStyle.color || '#6e7079';
    const nameFontSize = textStyle.fontSize || '12px';
    const nameFontWeight = textStyle.fontWeight || '400';
    const valueFontColor = textStyle.color || '#464646';
    const valueFontSize = textStyle.fontSize || '14px';
    const valueFontWeight = textStyle.fontWeight || '900';

    if (!Number.isNaN(nameFontSize)) 
        nameFontSize += 'px';
    if (!Number.isNaN(valueFontSize)) 
        valueFontSize += 'px';

    if (renderMode === 'html') {
        // `textStyle` is probably from user input, should be encoded to reduce security risk.
        return {
            // eslint-disable-next-line max-len
            nameStyle:  `font-size:${encodeHTML(nameFontSize +'')}; color:${encodeHTML(nameFontColor)}; font-weight:${encodeHTML(nameFontWeight +'')}`,
            // eslint-disable-next-line max-len
            valueStyle: `font-size:${encodeHTML(valueFontSize +'')};color:${encodeHTML(valueFontColor)};font-weight:${encodeHTML(valueFontWeight +'')}`
        }
    }
    return {
        nameStyle: {
	    fontSize: nameFontSize,
	    fill: nameFontColor,
	    fontWeight: nameFontWeight
	},
	valueStyle: {
	    fontSize: valueFontSize,
	    fill: valueFontColor,
	    fontWeight: valueFontWeight
	}
    };
}

[sirAbramstone]

ok, I finally get it - function also has to fix/adjust font-size if user submits it numeric as requested by ECharts.

Yes, you are right, but the task becomes even more difficult, when a custom formatter is used in the tooltip. Anyway, my PR is ready.