feat(tooltip): add formatter cache to tooltip

3b0df70d · zakwu · 99ab1d7a · 3b0df70d · 3b0df70d · 3b0df70d
3 changed file
--- a/src/component/tooltip/TooltipModel.ts
+++ b/src/component/tooltip/TooltipModel.ts
@@ -66,6 +66,10 @@ export interface TooltipOption extends CommonTooltipOption<TopLevelFormatterPara
    appendToBody?: boolean

    order?: TooltipOrderMode
+
+    useFormatterCache?: boolean
+
+    hitFormatterCache?: (key: string, cacheObj: any) => void
 }

 class TooltipModel extends ComponentModel<TooltipOption> {
@@ -173,4 +177,4 @@ class TooltipModel extends ComponentModel<TooltipOption> {

 ComponentModel.registerClass(TooltipModel);

-export default TooltipModel;
\ No newline at end of file
+export default TooltipModel;
--- a/src/component/tooltip/TooltipView.ts
+++ b/src/component/tooltip/TooltipView.ts
@@ -154,6 +154,8 @@ class TooltipView extends ComponentView {

    private _lastDataByCoordSys: DataByCoordSys[];

+    private _tooltipFormatterCache: {[propName: string]: any}
+
    init(ecModel: GlobalModel, api: ExtensionAPI) {
        if (env.node) {
            return;
@@ -714,6 +716,17 @@ class TooltipView extends ComponentView {
        });
    }

+    private _getTooltipCache(key: string): any {
+        return this._tooltipFormatterCache && this._tooltipFormatterCache[key];
+    }
+
+    private _setTooltipCache(key: string, value: any) {
+        if (!key) return;
+
+        this._tooltipFormatterCache = this._tooltipFormatterCache || {};
+        this._tooltipFormatterCache[key] = value;
+    }
+
    private _showTooltipContent(
        // Use Model<TooltipOption> insteadof TooltipModel because this model may be from series or other options.
        // Instead of top level tooltip.
@@ -749,6 +762,18 @@ class TooltipView extends ComponentView {
            html = formatUtil.formatTpl(formatter, params, true);
        }
        else if (zrUtil.isFunction(formatter)) {
+            // formatter cache
+            let formatterCache = null as any;
+            let key: string;
+            const useFormatterCache = tooltipModel.get('useFormatterCache');
+            const hitFormatterCache = tooltipModel.get('hitFormatterCache');
+
+            if(useFormatterCache && params) {
+                const p = zrUtil.isArray(params) ? params[0] : params;
+                key = [p.seriesId, p.componentIndex, p.seriesName, p.name, p.dataIndex].join('-');
+                formatterCache = this._getTooltipCache(key);
+            }
+
            const callback = bind(function (cbTicket: string, html: string) {
                if (cbTicket === this._ticket) {
                    tooltipContent.setContent(html, markupStyleCreator, tooltipModel, nearPoint.color, positionExpr);
@@ -758,7 +783,10 @@ class TooltipView extends ComponentView {
                }
            }, this);
            this._ticket = asyncTicket;
-            html = formatter(params, asyncTicket, callback);
+
+            html = formatterCache || formatter(params, asyncTicket, callback);
+            formatterCache && zrUtil.isFunction(hitFormatterCache) && hitFormatterCache(key, formatterCache);
+            key && this._setTooltipCache(key, html);
        }

        tooltipContent.setContent(html, markupStyleCreator, tooltipModel, nearPoint.color, positionExpr);

--- a/test/tooltip-formatter-cache.html
+++ b/test/tooltip-formatter-cache.html
+<!DOCTYPE html>
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script src="lib/esl.js"></script>
+    <script src="lib/config.js"></script>
+    <script src="lib/jquery.min.js"></script>
+    <script src="lib/facePrint.js"></script>
+    <script src="lib/testHelper.js"></script>
+    <!-- <script src="ut/lib/canteen.js"></script> -->
+    <link rel="stylesheet" href="lib/reset.css" />
+</head>
+<body>
+<style>
+</style>
+
+
+
+<div id="main0"></div>
+<div id="main1"></div>
+<div id="main2"></div>
+
+<script>
+    require(['echarts'/*, 'map/js/china' */], function (echarts) {
+        var labelRight = {
+            position: 'right'
+        };
+        var option = {
+            title: {
+                text: 'toolsTip formatter trigger once test #12338',
+                subtext: 'From ExcelHome',
+                sublink: 'http://e.weibo.com/1341556070/AjwF2AgQm'
+            },
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {            // 坐标轴指示器log，坐标轴触发有效
+                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+                },
+                useFormatterCache: true,        // 如果配置为true，formatter函数只触发一次
+                formatter: function (params, ticket, callback) {
+                    console.log('hit formatter:', params);
+                    return params[0];
+                },
+                // call when hit cache, call after use formatterCache
+                hitFormatterCache(key, cache) {
+                    console.log('hit cache:', key, cache);
+                }
+            },
+            grid: {
+                top: 80,
+                bottom: 30
+            },
+            xAxis: {
+                type: 'value',
+                position: 'top',
+                splitLine: {
+                    lineStyle: {
+                        type: 'dashed'
+                    }
+                }
+            },
+            yAxis: {
+                type: 'category',
+                axisLine: {show: false},
+                axisLabel: {show: false},
+                axisTick: {show: false},
+                splitLine: {show: false},
+                data: ['ten', 'nine', 'eight', 'seven', 'six', 'five', 'four', 'three', 'two', 'one']
+            },
+            series: [
+                {
+                    name: '生活费',
+                    type: 'bar',
+                    stack: '总量',
+                    label: {
+                        show: true,
+                        formatter: '{b}'
+                    },
+                    data: [
+                        {value: -0.07, label: labelRight},
+                        {value: -0.09, label: labelRight},
+                        0.2, 0.44,
+                        {value: -0.23, label: labelRight},
+                        0.08,
+                        {value: -0.17, label: labelRight},
+                        0.47,
+                        {value: -0.36, label: labelRight},
+                        0.18
+                    ]
+                }
+            ]
+        };
+
+
+        var chart = testHelper.create(echarts, 'main0', {
+            title: [
+                'the toolTips.triggerOnce set "true" ',
+                'Case from issue #12338'
+            ],
+            option: option
+        });
+    });
+</script>
+
+</body>
+</html>
+