This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch tooltip-value-formatter
in repository https://gitbox.apache.org/repos/asf/echarts.git
The following commit(s) were added to refs/heads/tooltip-value-formatter by
this push:
new 6b33202 feat(valueFormatter): fix gap
6b33202 is described below
commit 6b33202fcb59d6bba885022f0d5808134ed38550
Author: pissang <[email protected]>
AuthorDate: Wed Jan 5 22:09:38 2022 +0800
feat(valueFormatter): fix gap
---
src/component/tooltip/tooltipMarkup.ts | 19 ++--
test/tooltip-valueFormatter.html | 183 ++++++++++++++++++++++++++++++++-
2 files changed, 190 insertions(+), 12 deletions(-)
diff --git a/src/component/tooltip/tooltipMarkup.ts
b/src/component/tooltip/tooltipMarkup.ts
index 03aeab0..b893cd8 100644
--- a/src/component/tooltip/tooltipMarkup.ts
+++ b/src/component/tooltip/tooltipMarkup.ts
@@ -201,27 +201,28 @@ function getBuilder(frag: TooltipMarkupBlockFragment):
TooltipMarkupFragmentBuil
function getBlockGapLevel(frag: TooltipMarkupBlockFragment) {
if (isSectionFragment(frag)) {
- let thisGapLevelBetweenSubBlocks = 0;
+ let gapLevel = 0;
const subBlockLen = frag.blocks.length;
- const thisBlockHasInnerGap = subBlockLen > 1 || (subBlockLen > 0 &&
!frag.noHeader);
+ const hasInnerGap = subBlockLen > 1 || (subBlockLen > 0 &&
!frag.noHeader);
each(frag.blocks, function (subBlock) {
const subGapLevel = getBlockGapLevel(subBlock);
// If the some of the sub-blocks have some gaps (like 10px)
inside, this block
// should use a larger gap (like 20px) to distinguish those
sub-blocks.
- if (subGapLevel >= thisGapLevelBetweenSubBlocks) {
- thisGapLevelBetweenSubBlocks = subGapLevel + (
- (
- thisBlockHasInnerGap && (
+ if (subGapLevel >= gapLevel) {
+ gapLevel = subGapLevel + (
+ +(
+ hasInnerGap && (
// 0 always can not be readable gap level.
!subGapLevel
// If no header, always keep the sub gap level.
Otherwise
// look weird in case `multipleSeries`.
- || (subBlock.type === 'section' &&
!subBlock.noHeader)
+ || (isSectionFragment(subBlock) &&
!subBlock.noHeader)
)
- ) ? 1 : 0
+ )
);
}
});
+ return gapLevel;
}
return 0;
}
@@ -271,7 +272,7 @@ function buildSection(
? subMarkupTextList.join(gaps.richText)
: wrapBlockHTML(
subMarkupTextList.join(''),
- topMarginForOuterGap
+ noHeader ? topMarginForOuterGap : gaps.html
);
if (noHeader) {
diff --git a/test/tooltip-valueFormatter.html b/test/tooltip-valueFormatter.html
index 3d6f9e1..be4f227 100644
--- a/test/tooltip-valueFormatter.html
+++ b/test/tooltip-valueFormatter.html
@@ -38,6 +38,8 @@ under the License.
<div id="main0"></div>
+ <div id="main1"></div>
+ <div id="main2"></div>
@@ -77,9 +79,6 @@ under the License.
'Basic valueFormatter of item tooltip'
],
option: option
- // height: 300,
- // buttons: [{text: 'btn-txt', onclick: function () {}}],
- // recordCanvas: true,
});
chart.dispatchAction({
@@ -90,7 +89,185 @@ under the License.
});
</script>
+ <script>
+ require([
+ 'echarts'
+ ], function (echarts) {
+ var option;
+
+ option = {
+ animation: false,
+ tooltip: {
+ position: 'top',
+ tooltip: {
+ valueFormatter: 'placeholder'
+ },
+ },
+ xAxis: {
+ type: 'category',
+ data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
+ },
+ yAxis: [{
+ type: 'value'
+ }, {
+ type: 'value',
+ alignTicks: true
+ }],
+ series: [
+ {
+ data: [50, 80, 70, 20, 30, 10, 100],
+ tooltip: {
+ valueFormatter: (val) => '¥' + val
+ },
+ type: 'bar'
+ },
+ {
+ data: [10, 8, 12, 7, 12, 8, 5],
+ tooltip: {
+ valueFormatter: (val) => '$' + val
+ },
+ yAxisIndex: 1,
+ type: 'bar'
+ },
+ ]
+ };
+
+ var chart = testHelper.create(echarts, 'main1', {
+ title: [
+ 'Different valueFormatter on series.'
+ ],
+ option: option
+ });
+ });
+ </script>
+
+ <script>
+ require([
+ 'echarts',
+ 'data/large-data.json'
+ ], function (echarts, packedData) {
+ var option;
+
+ function round2(val) {
+ return Math.round(val * 100) / 100;
+ }
+
+ function round3(val) {
+ return Math.round(val * 1000) / 1000;
+ }
+
+ function prepData(packed) {
+ console.time('prep');
+ // epoch,idl,recv,send,read,writ,used,free
+
+ var numFields = packed[0];
+ packed = packed.slice(numFields + 1);
+
+ var repeatTimes = 5;
+
+ var data = new Float64Array((packed.length / numFields) *
4 * repeatTimes);
+
+ var off = 0;
+ var date = packed[0];
+ for (let repeat = 0; repeat < repeatTimes; repeat++) {
+ for (let i = 0, j = 0; i < packed.length; i +=
numFields, j++) {
+ date += 1;
+ data[off++] = date * 60 * 1000;
+ data[off++] = round3(100 - packed[i + 1]);
+ data[off++] = round2(
+ (100 * packed[i + 5]) / (packed[i + 5] +
packed[i + 6])
+ );
+ data[off++] = packed[i + 3];
+ }
+ }
+ console.timeEnd('prep');
+
+ return data;
+ }
+
+
+ option = {
+ animation: false,
+ dataset: {
+ source: prepData(packedData),
+ dimensions: ['date', 'cpu', 'ram', 'tcpout']
+ },
+ tooltip: {
+ trigger: 'axis'
+ },
+ legend: {},
+ grid: {
+ containLabel: true,
+ left: 0,
+ top: 50,
+ right: 0,
+ bottom: 30
+ },
+ xAxis: {
+ type: 'time'
+ },
+ yAxis: [{
+ type: 'value',
+ max: 100,
+ axisLabel: {
+ formatter: '{value} %'
+ }
+ }, {
+ type: 'value',
+ alignTicks: true,
+ axisLabel: {
+ formatter: '{value} MB'
+ }
+ }],
+ series: [{
+ name: 'CPU',
+ type: 'line',
+ showSymbol: false,
+ tooltip: {
+ valueFormatter: (value) => value + ' %'
+ },
+ lineStyle: { width: 1 },
+ emphasis: { lineStyle: { width: 1 } },
+ encode: {
+ x: 'date',
+ y: 'cpu'
+ }
+ }, {
+ name: 'RAM',
+ type: 'line',
+ yAxisIndex: 1,
+ tooltip: {
+ valueFormatter: (value) => value + ' MB'
+ },
+ showSymbol: false,
+ lineStyle: { width: 1 },
+ emphasis: { lineStyle: { width: 1 } },
+ encode: {
+ x: 'date',
+ y: 'ram'
+ }
+ }, {
+ name: 'TCP Out',
+ type: 'line',
+ yAxisIndex: 1,
+ showSymbol: false,
+ lineStyle: { width: 1 },
+ emphasis: { lineStyle: { width: 1 } },
+ encode: {
+ x: 'date',
+ y: 'tcpout'
+ }
+ }]
+ };
+ var chart = testHelper.create(echarts, 'main2', {
+ title: [
+ 'Axis trigger'
+ ],
+ option: option
+ });
+ });
+ </script>
</body>
</html>
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
