100pah commented on a change in pull request #13848:
URL:
https://github.com/apache/incubator-echarts/pull/13848#discussion_r551141939
##########
File path: src/component/tooltip/tooltipMarkup.ts
##########
@@ -32,20 +32,52 @@ import { getRandomIdBase } from '../../util/number';
import Model from '../../model/Model';
import { TooltipOption } from './TooltipModel';
-
-const TOOLTIP_NAME_TEXT_STYLE_CSS = 'font-size:12px;color:#6e7079';
-const TOOLTIP_TEXT_STYLE_RICH = {
- fontSize: 12,
- fill: '#6e7079'
-};
-const TOOLTIP_VALUE_TEXT_STYLE_CSS =
'font-size:14px;color:#464646;font-weight:900';
-const TOOLTIP_VALUE_TEXT_STYLE_RICH = {
- fontSize: 14,
- fill: '#464646',
- fontWeight: 900
+type RichTextStyle = {
+ fontSize: number | string,
+ fill: string,
+ fontWeight?: number | string
};
+
+type TextStyle = string | RichTextStyle;
+
const TOOLTIP_LINE_HEIGHT_CSS = 'line-height:1';
+// TODO: more textStyle option
+function getTooltipTextStyle(
+ textStyle: TooltipOption['textStyle'],
+ renderMode: TooltipRenderMode,
+ tooltipModel?: Model<TooltipOption>
+): {
+ nameStyle: TextStyle
+ valueStyle: TextStyle
+} {
+ const nameFontColor = textStyle.color || '#6e7079';
+ const nameFontSize = textStyle.fontSize || '12px';
Review comment:
By convention, `fontSize` in user option should be `12` rather than
`12px`.
##########
File path: src/component/tooltip/tooltipMarkup.ts
##########
@@ -32,20 +32,52 @@ import { getRandomIdBase } from '../../util/number';
import Model from '../../model/Model';
import { TooltipOption } from './TooltipModel';
-
-const TOOLTIP_NAME_TEXT_STYLE_CSS = 'font-size:12px;color:#6e7079';
-const TOOLTIP_TEXT_STYLE_RICH = {
- fontSize: 12,
- fill: '#6e7079'
-};
-const TOOLTIP_VALUE_TEXT_STYLE_CSS =
'font-size:14px;color:#464646;font-weight:900';
-const TOOLTIP_VALUE_TEXT_STYLE_RICH = {
- fontSize: 14,
- fill: '#464646',
- fontWeight: 900
+type RichTextStyle = {
+ fontSize: number | string,
+ fill: string,
+ fontWeight?: number | string
};
+
+type TextStyle = string | RichTextStyle;
+
const TOOLTIP_LINE_HEIGHT_CSS = 'line-height:1';
+// TODO: more textStyle option
+function getTooltipTextStyle(
+ textStyle: TooltipOption['textStyle'],
+ renderMode: TooltipRenderMode,
+ tooltipModel?: Model<TooltipOption>
+): {
+ nameStyle: TextStyle
+ valueStyle: TextStyle
+} {
+ const nameFontColor = textStyle.color || '#6e7079';
+ const nameFontSize = textStyle.fontSize || '12px';
+ const valueFontColor = textStyle.color || '#464646';
+ const valueFontSize = textStyle.fontSize || '14px';
Review comment:
`14` rather than `14px`.
##########
File path: src/component/tooltip/tooltipMarkup.ts
##########
@@ -401,36 +446,46 @@ function wrapBlockHTML(
+ '</div>';
}
-function wrapInlineNameHTML(name: string, leftHasMarker: boolean): string {
+function wrapInlineNameHTML(
+ name: string,
+ leftHasMarker: boolean,
+ style: string
+): string {
const marginCss = leftHasMarker ? 'margin-left:2px' : '';
- return `<span style="${TOOLTIP_NAME_TEXT_STYLE_CSS};${marginCss}">`
+ return `<span style="${style};${marginCss}">`
+ encodeHTML(name)
+ '</span>';
}
-function wrapInlineValueHTML(valueList: string[], alignRight: boolean,
valueCloseToMarker: boolean): string {
+function wrapInlineValueHTML(
+ valueList: string[],
+ alignRight: boolean,
+ valueCloseToMarker: boolean,
+ style: string
+): string {
// Do not too close to marker, considering there are multiple values
separated by spaces.
const paddingStr = valueCloseToMarker ? '10px' : '20px';
const alignCSS = alignRight ? `float:right;margin-left:${paddingStr}` : '';
return (
- `<span style="${alignCSS};${TOOLTIP_VALUE_TEXT_STYLE_CSS}">`
+ `<span style="${alignCSS};${style}">`
// Value has commas inside, so use ' ' as delimiter for multiple
values.
+ map(valueList, value => encodeHTML(value)).join(' ')
+ '</span>'
);
}
-function wrapInlineNameRichText(ctx: TooltipMarkupBuildContext, name: string):
string {
- return ctx.markupStyleCreator.wrapRichTextStyle(name,
TOOLTIP_TEXT_STYLE_RICH);
+function wrapInlineNameRichText(ctx: TooltipMarkupBuildContext, name: string,
style: RichTextStyle): string {
+ return ctx.markupStyleCreator.wrapRichTextStyle(name, style as
Dictionary<unknown>);
}
function wrapInlineValueRichText(
ctx: TooltipMarkupBuildContext,
valueList: string[],
alignRight: boolean,
- valueCloseToMarker: boolean
+ valueCloseToMarker: boolean,
+ style: RichTextStyle
): string {
- const styles: Dictionary<unknown>[] = [TOOLTIP_VALUE_TEXT_STYLE_RICH];
+ const styles: Dictionary<unknown>[] = [style];
Review comment:
In fact, the accurate type of `ctx.markupStyleCreator.richTextStyles`
should be `Dictionary<TextStylePropsPart>`, which is the same as
`textStyle.rich`.
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
