cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
230 lines (229 loc) • 9.56 kB
JavaScript
import { convertToColorString, makeValueReadable, getTooltipMarker } from "../../util/format.mjs";
import { assert, isArray, hasOwn, each, extend, map, isString } from "../../../../zrender/lib/core/util.mjs";
import { SortOrderComparator } from "../../data/helper/dataValueHelper.mjs";
import { getRandomIdBase } from "../../util/number.mjs";
import { encodeHTML } from "../../../../zrender/lib/core/dom.mjs";
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"];
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 subMarkupText2 = getBuilder(subBlock)(
valueFormatter ? extend(extend({}, ctx), {
valueFormatter
}) : ctx,
subBlock,
idx > 0 ? gaps.html : 0,
toolTipTextStyle
);
subMarkupText2 != null && subMarkupTextList.push(subMarkupText2);
});
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);
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);
}
function buildTooltipMarkup(fragment, markupStyleCreator, renderMode, orderMode, useUTC, toolTipTextStyle) {
if (!fragment) {
return;
}
var builder = getBuilder(fragment);
var ctx = {
useUTC,
renderMode,
orderMode,
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);
}
function retrieveVisualColorForTooltipMarker(series, dataIndex) {
var style = series.getData().getItemVisual(dataIndex, "style");
var color = style[series.visualDrawType];
return convertToColorString(color);
}
function getPaddingFromTooltipModel(model, renderMode) {
var padding = model.get("padding");
return padding != null ? padding : renderMode === "richText" ? [8, 10] : 10;
}
var TooltipMarkupStyleCreator = function() {
function TooltipMarkupStyleCreator2() {
this.richTextStyles = {};
this._nextStyleNameId = getRandomIdBase();
}
TooltipMarkupStyleCreator2.prototype._generateStyleName = function() {
return "__EC_aUTo_" + this._nextStyleNameId++;
};
TooltipMarkupStyleCreator2.prototype.makeTooltipMarker = function(markerType, colorStr, renderMode) {
var markerId = renderMode === "richText" ? this._generateStyleName() : null;
var marker = getTooltipMarker({
color: colorStr,
type: markerType,
renderMode,
markerId
});
if (isString(marker)) {
return marker;
} else {
this.richTextStyles[markerId] = marker.style;
return marker.content;
}
};
TooltipMarkupStyleCreator2.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 TooltipMarkupStyleCreator2;
}();
export { TooltipMarkupStyleCreator, buildTooltipMarkup, createTooltipMarkup, getPaddingFromTooltipModel, retrieveVisualColorForTooltipMarker };