pissang commented on a change in pull request #13848:
URL:
https://github.com/apache/incubator-echarts/pull/13848#discussion_r551132755
##########
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>
Review comment:
Parameter `tooltipModel` is not used here.
##########
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';
+ const valueFontWeight = textStyle.fontWeight || '900';
Review comment:
It's a bit confusing that only `value` text can change the font-weight.
I will prefer both `name` and `value` will be set, just like `fontSize` and
`fill`
In the long term, we can discuss a new set of options that can configure
each part of the tooltip with enough flexibility. For example the style and
formatter of each value. Of cause that should be a new topic and can be
designed in a new pull request.
##########
File path: src/component/tooltip/tooltipMarkup.ts
##########
@@ -303,7 +345,8 @@ const builderMap: { [key in
TooltipMarkupBlockFragment['type']]: TooltipMarkupFr
function buildSubBlocks(
ctx: TooltipMarkupBuildContext,
fragment: TooltipMarkupSection,
- topMarginForOuterGap: number
+ topMarginForOuterGap: number,
+ toolTipTextStyle: TooltipOption['textStyle']
Review comment:
`tooltipTextStyle` is a more common naming style here
##########
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:
@chfw I noticed @100pah is using `Dictionary<unknown>` to represent the
style object in this module. I think it's mainly because the style can be both
RichTextStyle or normal CSS style for HTML Text.
----------------------------------------------------------------
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]
