123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324 |
- import { getTooltipMarker, encodeHTML, makeValueReadable, convertToColorString } from '../../util/format.js';
- import { isString, each, hasOwn, isArray, map, assert, extend } from 'zrender/lib/core/util.js';
- import { SortOrderComparator } from '../../data/helper/dataValueHelper.js';
- import { getRandomIdBase } from '../../util/number.js';
- var TOOLTIP_LINE_HEIGHT_CSS = 'line-height:1';
- function getTooltipTextStyle(textStyle, renderMode) {
- var nameFontColor = textStyle.color || '#6e7079';
- var nameFontSize = textStyle.fontSize || 12;
- var nameFontWeight = textStyle.fontWeight || '400';
- var valueFontColor = textStyle.color || '#464646';
- var valueFontSize = textStyle.fontSize || 14;
- var valueFontWeight = textStyle.fontWeight || '900';
- if (renderMode === 'html') {
-
- return {
-
- nameStyle: "font-size:" + encodeHTML(nameFontSize + '') + "px;color:" + encodeHTML(nameFontColor) + ";font-weight:" + encodeHTML(nameFontWeight + ''),
-
- valueStyle: "font-size:" + encodeHTML(valueFontSize + '') + "px;color:" + encodeHTML(valueFontColor) + ";font-weight:" + encodeHTML(valueFontWeight + '')
- };
- } else {
- return {
- nameStyle: {
- fontSize: nameFontSize,
- fill: nameFontColor,
- fontWeight: nameFontWeight
- },
- valueStyle: {
- fontSize: valueFontSize,
- fill: valueFontColor,
- fontWeight: valueFontWeight
- }
- };
- }
- }
- var HTML_GAPS = [0, 10, 20, 30];
- var RICH_TEXT_GAPS = ['', '\n', '\n\n', '\n\n\n'];
- export function createTooltipMarkup(type, option) {
- option.type = type;
- return option;
- }
- function isSectionFragment(frag) {
- return frag.type === 'section';
- }
- function getBuilder(frag) {
- return isSectionFragment(frag) ? buildSection : buildNameValue;
- }
- function getBlockGapLevel(frag) {
- if (isSectionFragment(frag)) {
- var gapLevel_1 = 0;
- var subBlockLen = frag.blocks.length;
- var hasInnerGap_1 = subBlockLen > 1 || subBlockLen > 0 && !frag.noHeader;
- each(frag.blocks, function (subBlock) {
- var subGapLevel = getBlockGapLevel(subBlock);
-
-
- if (subGapLevel >= gapLevel_1) {
- gapLevel_1 = subGapLevel + +(hasInnerGap_1 && (
-
- !subGapLevel
-
-
- || isSectionFragment(subBlock) && !subBlock.noHeader));
- }
- });
- return gapLevel_1;
- }
- return 0;
- }
- function buildSection(ctx, fragment, topMarginForOuterGap, toolTipTextStyle) {
- var noHeader = fragment.noHeader;
- var gaps = getGap(getBlockGapLevel(fragment));
- var subMarkupTextList = [];
- var subBlocks = fragment.blocks || [];
- assert(!subBlocks || isArray(subBlocks));
- subBlocks = subBlocks || [];
- var orderMode = ctx.orderMode;
- if (fragment.sortBlocks && orderMode) {
- subBlocks = subBlocks.slice();
- var orderMap = {
- valueAsc: 'asc',
- valueDesc: 'desc'
- };
- if (hasOwn(orderMap, orderMode)) {
- var comparator_1 = new SortOrderComparator(orderMap[orderMode], null);
- subBlocks.sort(function (a, b) {
- return comparator_1.evaluate(a.sortParam, b.sortParam);
- });
- }
-
- else if (orderMode === 'seriesDesc') {
- subBlocks.reverse();
- }
- }
- each(subBlocks, function (subBlock, idx) {
- var valueFormatter = fragment.valueFormatter;
- var subMarkupText = getBuilder(subBlock)(
-
- valueFormatter ? extend(extend({}, ctx), {
- valueFormatter: valueFormatter
- }) : ctx, subBlock, idx > 0 ? gaps.html : 0, toolTipTextStyle);
- subMarkupText != null && subMarkupTextList.push(subMarkupText);
- });
- var subMarkupText = ctx.renderMode === 'richText' ? subMarkupTextList.join(gaps.richText) : wrapBlockHTML(subMarkupTextList.join(''), noHeader ? topMarginForOuterGap : gaps.html);
- if (noHeader) {
- return subMarkupText;
- }
- var displayableHeader = makeValueReadable(fragment.header, 'ordinal', ctx.useUTC);
- var nameStyle = getTooltipTextStyle(toolTipTextStyle, ctx.renderMode).nameStyle;
- if (ctx.renderMode === 'richText') {
- return wrapInlineNameRichText(ctx, displayableHeader, nameStyle) + gaps.richText + subMarkupText;
- } else {
- return wrapBlockHTML("<div style=\"" + nameStyle + ";" + TOOLTIP_LINE_HEIGHT_CSS + ";\">" + encodeHTML(displayableHeader) + '</div>' + subMarkupText, topMarginForOuterGap);
- }
- }
- function buildNameValue(ctx, fragment, topMarginForOuterGap, toolTipTextStyle) {
- var renderMode = ctx.renderMode;
- var noName = fragment.noName;
- var noValue = fragment.noValue;
- var noMarker = !fragment.markerType;
- var name = fragment.name;
- var useUTC = ctx.useUTC;
- var valueFormatter = fragment.valueFormatter || ctx.valueFormatter || function (value) {
- value = isArray(value) ? value : [value];
- return map(value, function (val, idx) {
- return makeValueReadable(val, isArray(valueTypeOption) ? valueTypeOption[idx] : valueTypeOption, useUTC);
- });
- };
- if (noName && noValue) {
- return;
- }
- var markerStr = noMarker ? '' : ctx.markupStyleCreator.makeTooltipMarker(fragment.markerType, fragment.markerColor || '#333', renderMode);
- var readableName = noName ? '' : makeValueReadable(name, 'ordinal', useUTC);
- var valueTypeOption = fragment.valueType;
- var readableValueList = noValue ? [] : valueFormatter(fragment.value, fragment.dataIndex);
- var valueAlignRight = !noMarker || !noName;
-
- var valueCloseToMarker = !noMarker && noName;
- var _a = getTooltipTextStyle(toolTipTextStyle, renderMode),
- nameStyle = _a.nameStyle,
- valueStyle = _a.valueStyle;
- return renderMode === 'richText' ? (noMarker ? '' : markerStr) + (noName ? '' : wrapInlineNameRichText(ctx, readableName, nameStyle))
-
- + (noValue ? '' : wrapInlineValueRichText(ctx, readableValueList, valueAlignRight, valueCloseToMarker, valueStyle)) : wrapBlockHTML((noMarker ? '' : markerStr) + (noName ? '' : wrapInlineNameHTML(readableName, !noMarker, nameStyle)) + (noValue ? '' : wrapInlineValueHTML(readableValueList, valueAlignRight, valueCloseToMarker, valueStyle)), topMarginForOuterGap);
- }
- export function buildTooltipMarkup(fragment, markupStyleCreator, renderMode, orderMode, useUTC, toolTipTextStyle) {
- if (!fragment) {
- return;
- }
- var builder = getBuilder(fragment);
- var ctx = {
- useUTC: useUTC,
- renderMode: renderMode,
- orderMode: orderMode,
- markupStyleCreator: markupStyleCreator,
- valueFormatter: fragment.valueFormatter
- };
- return builder(ctx, fragment, 0, toolTipTextStyle);
- }
- function getGap(gapLevel) {
- return {
- html: HTML_GAPS[gapLevel],
- richText: RICH_TEXT_GAPS[gapLevel]
- };
- }
- function wrapBlockHTML(encodedContent, topGap) {
- var clearfix = '<div style="clear:both"></div>';
- var marginCSS = "margin: " + topGap + "px 0 0";
- return "<div style=\"" + marginCSS + ";" + TOOLTIP_LINE_HEIGHT_CSS + ";\">" + encodedContent + clearfix + '</div>';
- }
- function wrapInlineNameHTML(name, leftHasMarker, style) {
- var marginCss = leftHasMarker ? 'margin-left:2px' : '';
- return "<span style=\"" + style + ";" + marginCss + "\">" + encodeHTML(name) + '</span>';
- }
- function wrapInlineValueHTML(valueList, alignRight, valueCloseToMarker, style) {
-
- var paddingStr = valueCloseToMarker ? '10px' : '20px';
- var alignCSS = alignRight ? "float:right;margin-left:" + paddingStr : '';
- valueList = isArray(valueList) ? valueList : [valueList];
- return "<span style=\"" + alignCSS + ";" + style + "\">"
-
- + map(valueList, function (value) {
- return encodeHTML(value);
- }).join(' ') + '</span>';
- }
- function wrapInlineNameRichText(ctx, name, style) {
- return ctx.markupStyleCreator.wrapRichTextStyle(name, style);
- }
- function wrapInlineValueRichText(ctx, values, alignRight, valueCloseToMarker, style) {
- var styles = [style];
- var paddingLeft = valueCloseToMarker ? 10 : 20;
- alignRight && styles.push({
- padding: [0, 0, 0, paddingLeft],
- align: 'right'
- });
-
- return ctx.markupStyleCreator.wrapRichTextStyle(isArray(values) ? values.join(' ') : values, styles);
- }
- export function retrieveVisualColorForTooltipMarker(series, dataIndex) {
- var style = series.getData().getItemVisual(dataIndex, 'style');
- var color = style[series.visualDrawType];
- return convertToColorString(color);
- }
- export function getPaddingFromTooltipModel(model, renderMode) {
- var padding = model.get('padding');
- return padding != null ? padding
-
- : renderMode === 'richText' ? [8, 10] : 10;
- }
- var TooltipMarkupStyleCreator = function () {
- function TooltipMarkupStyleCreator() {
- this.richTextStyles = {};
-
-
-
- this._nextStyleNameId = getRandomIdBase();
- }
- TooltipMarkupStyleCreator.prototype._generateStyleName = function () {
- return '__EC_aUTo_' + this._nextStyleNameId++;
- };
- TooltipMarkupStyleCreator.prototype.makeTooltipMarker = function (markerType, colorStr, renderMode) {
- var markerId = renderMode === 'richText' ? this._generateStyleName() : null;
- var marker = getTooltipMarker({
- color: colorStr,
- type: markerType,
- renderMode: renderMode,
- markerId: markerId
- });
- if (isString(marker)) {
- return marker;
- } else {
- if (process.env.NODE_ENV !== 'production') {
- assert(markerId);
- }
- this.richTextStyles[markerId] = marker.style;
- return marker.content;
- }
- };
-
- TooltipMarkupStyleCreator.prototype.wrapRichTextStyle = function (text, styles) {
- var finalStl = {};
- if (isArray(styles)) {
- each(styles, function (stl) {
- return extend(finalStl, stl);
- });
- } else {
- extend(finalStl, styles);
- }
- var styleName = this._generateStyleName();
- this.richTextStyles[styleName] = finalStl;
- return "{" + styleName + "|" + text + "}";
- };
- return TooltipMarkupStyleCreator;
- }();
- export { TooltipMarkupStyleCreator };
|