Merge pull request apache#13848 from susiwen8/tooltip-textStyle

Fix(tooltip.textStyle): fix color not working

src/component/tooltip/TooltipModel.ts

@@ -169,8 +169,6 @@ class TooltipModel extends ComponentModel<TooltipOption> {
             // otherwise it will always override those styles on option.axisPointer.
         },
         textStyle: {
-            color: '#666',
-            fontSize: 14
         }
     };
 }

src/component/tooltip/TooltipView.ts

@@ -542,7 +542,8 @@ class TooltipView extends ComponentView {
         const orderMode = singleTooltipModel.get('order');
 
         const builtMarkupText = buildTooltipMarkup(
-            articleMarkup, markupStyleCreator, renderMode, orderMode, ecModel.get('useUTC')
+            articleMarkup, markupStyleCreator, renderMode, orderMode, ecModel.get('useUTC'),
+            singleTooltipModel.get('textStyle')
         );
         builtMarkupText && markupTextArrLegacy.unshift(builtMarkupText);
         const blockBreak = renderMode === 'richText' ? '\n\n' : '<br/>';
@@ -621,7 +622,8 @@ class TooltipView extends ComponentView {
                 markupStyleCreator,
                 renderMode,
                 orderMode,
-                ecModel.get('useUTC')
+                ecModel.get('useUTC'),
+                tooltipModel.get('textStyle')
             )
             : seriesTooltipResult.markupText;
 

src/component/tooltip/tooltipMarkup.ts

@@ -32,20 +32,53 @@ 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
+): {
+    nameStyle: TextStyle
+    valueStyle: TextStyle
+} {
+    const nameFontColor = textStyle.color || '#6e7079';
+    const nameFontSize = textStyle.fontSize || 12;
+    const nameFontWeight = textStyle.fontWeight || '400';
+    const valueFontColor = textStyle.color || '#464646';
+    const valueFontSize = textStyle.fontSize || 14;
+    const valueFontWeight = textStyle.fontWeight || '900';
+
+    if (renderMode === 'html') {
+        return {
+            nameStyle: `font-size:${nameFontSize}px;color:${nameFontColor};font-weight:${nameFontWeight}`,
+            valueStyle: `font-size:${valueFontSize}px;color:${valueFontColor};font-weight:${valueFontWeight}`
+        };
+    }
+    else {
+        return {
+            nameStyle: {
+                fontSize: nameFontSize,
+                fill: nameFontColor,
+                fontWeight: nameFontWeight
+            },
+            valueStyle: {
+                fontSize: valueFontSize,
+                fill: valueFontColor,
+                fontWeight: valueFontWeight
+            }
+        };
+    }
+}
+
 // 0: no gap in this block.
 // 1: has max gap in level 1 in this block.
 // ...
@@ -150,7 +183,8 @@ interface TooltipMarkupFragmentBuilder {
     build(
         ctx: TooltipMarkupBuildContext,
         fragment: TooltipMarkupBlockFragment,
-        topMarginForOuterGap: number
+        topMarginForOuterGap: number,
+        toolTipTextStyle: TooltipOption['textStyle']
     ): MarkupText;
 }
 
@@ -198,28 +232,35 @@ const builderMap: { [key in TooltipMarkupBlockFragment['type']]: TooltipMarkupFr
             fragment.__gapLevelBetweenSubBlocks = thisGapLevelBetweenSubBlocks;
         },
 
-        build(ctx, fragment: TooltipMarkupSection, topMarginForOuterGap): string {
+        build(
+            ctx,
+            fragment: TooltipMarkupSection,
+            topMarginForOuterGap,
+            toolTipTextStyle
+        ): string {
             const noHeader = fragment.noHeader;
             const gaps = getGap(fragment);
 
             const subMarkupText = buildSubBlocks(
                 ctx,
                 fragment,
-                noHeader ? topMarginForOuterGap : gaps.html
+                noHeader ? topMarginForOuterGap : gaps.html,
+                toolTipTextStyle
             );
 
             if (noHeader) {
                 return subMarkupText;
             }
 
             const displayableHeader = makeValueReadable(fragment.header, 'ordinal', ctx.useUTC);
+            const {nameStyle} = getTooltipTextStyle(toolTipTextStyle, ctx.renderMode);
             if (ctx.renderMode === 'richText') {
-                return wrapInlineNameRichText(ctx, displayableHeader) + gaps.richText
+                return wrapInlineNameRichText(ctx, displayableHeader, nameStyle as RichTextStyle) + gaps.richText
                     + subMarkupText;
             }
             else {
                 return wrapBlockHTML(
-                    `<div style="${TOOLTIP_NAME_TEXT_STYLE_CSS};${TOOLTIP_LINE_HEIGHT_CSS};">`
+                    `<div style="${nameStyle};${TOOLTIP_LINE_HEIGHT_CSS};">`
                         + encodeHTML(displayableHeader)
                         + '</div>'
                         + subMarkupText,
@@ -240,7 +281,7 @@ const builderMap: { [key in TooltipMarkupBlockFragment['type']]: TooltipMarkupFr
             fragment.__gapLevelBetweenSubBlocks = 0;
         },
 
-        build(ctx, fragment: TooltipMarkupNameValueBlock, topMarginForOuterGap) {
+        build(ctx, fragment: TooltipMarkupNameValueBlock, topMarginForOuterGap, toolTipTextStyle) {
             const renderMode = ctx.renderMode;
             const noName = fragment.noName;
             const noValue = fragment.noValue;
@@ -278,20 +319,22 @@ const builderMap: { [key in TooltipMarkupBlockFragment['type']]: TooltipMarkupFr
             // It little weird if only value next to marker but far from marker.
             const valueCloseToMarker = !noMarker && noName;
 
+            const {nameStyle, valueStyle} = getTooltipTextStyle(toolTipTextStyle, renderMode);
+
             return renderMode === 'richText'
                 ? (
                     (noMarker ? '' : markerStr)
-                    + (noName ? '' : wrapInlineNameRichText(ctx, readableName))
+                    + (noName ? '' : wrapInlineNameRichText(ctx, readableName, nameStyle as RichTextStyle))
                     // Value has commas inside, so use ' ' as delimiter for multiple values.
                     + (noValue ? '' : wrapInlineValueRichText(
-                        ctx, readableValueList, valueAlignRight, valueCloseToMarker
+                        ctx, readableValueList, valueAlignRight, valueCloseToMarker, valueStyle as RichTextStyle
                     ))
                 )
                 : wrapBlockHTML(
                     (noMarker ? '' : markerStr)
-                    + (noName ? '' : wrapInlineNameHTML(readableName, !noMarker))
+                    + (noName ? '' : wrapInlineNameHTML(readableName, !noMarker, nameStyle as string))
                     + (noValue ? '' : wrapInlineValueHTML(
-                        readableValueList, valueAlignRight, valueCloseToMarker
+                        readableValueList, valueAlignRight, valueCloseToMarker, valueStyle as string
                     )),
                     topMarginForOuterGap
                 );
@@ -303,7 +346,8 @@ const builderMap: { [key in TooltipMarkupBlockFragment['type']]: TooltipMarkupFr
 function buildSubBlocks(
     ctx: TooltipMarkupBuildContext,
     fragment: TooltipMarkupSection,
-    topMarginForOuterGap: number
+    topMarginForOuterGap: number,
+    tooltipTextStyle: TooltipOption['textStyle']
 ): MarkupText {
     const subMarkupTextList: string[] = [];
     let subBlocks = fragment.blocks || [];
@@ -329,7 +373,8 @@ function buildSubBlocks(
         const subMarkupText = getBuilder(subBlock).build(
             ctx,
             subBlock,
-            idx > 0 ? gaps.html : 0
+            idx > 0 ? gaps.html : 0,
+            tooltipTextStyle
         );
         subMarkupText != null && subMarkupTextList.push(subMarkupText);
     });
@@ -361,7 +406,8 @@ export function buildTooltipMarkup(
     markupStyleCreator: TooltipMarkupStyleCreator,
     renderMode: TooltipRenderMode,
     orderMode: TooltipOrderMode,
-    useUTC: boolean
+    useUTC: boolean,
+    toolTipTextStyle: TooltipOption['textStyle']
 ): MarkupText {
     if (!fragment) {
         return;
@@ -375,7 +421,7 @@ export function buildTooltipMarkup(
         orderMode: orderMode,
         markupStyleCreator: markupStyleCreator
     };
-    return builder.build(ctx, fragment, 0);
+    return builder.build(ctx, fragment, 0, toolTipTextStyle);
 }
 
 
@@ -401,36 +447,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('&nbsp;&nbsp;')
         + '</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];
     const paddingLeft = valueCloseToMarker ? 10 : 20;
     alignRight && styles.push({ padding: [0, 0, 0, paddingLeft], align: 'right' });
     // Value has commas inside, so use '  ' as delimiter for multiple values.