You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2019/06/18 15:52:58 UTC

[incubator-echarts] branch master updated: Add dimensionNames and encode info to formatter callback params. Fix #10248 Close #10250

This is an automated email from the ASF dual-hosted git repository.

sushuang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git


The following commit(s) were added to refs/heads/master by this push:
     new aa18fa0  Add dimensionNames and encode info to formatter callback params. Fix #10248  Close #10250
aa18fa0 is described below

commit aa18fa0cb67f4ec7093db28b70f61dafc304e686
Author: sushuang <su...@gmail.com>
AuthorDate: Tue Jun 18 23:50:01 2019 +0800

    Add dimensionNames and encode info to formatter callback params.
    Fix #10248  Close #10250
---
 src/data/List.js                   |  15 ++++
 src/data/helper/dimensionHelper.js |  32 ++++++---
 src/model/mixin/dataFormat.js      |   8 ++-
 test/label-formatter.html          | 137 +++++++++++++++++++++++++++++++++++++
 4 files changed, 179 insertions(+), 13 deletions(-)

diff --git a/src/data/List.js b/src/data/List.js
index e5a16d3..7fad145 100644
--- a/src/data/List.js
+++ b/src/data/List.js
@@ -304,6 +304,21 @@ var List = function (dimensions, hostModel) {
      * @private
      */
     this._calculationInfo = {};
+
+    /**
+     * User output info of this data.
+     * DO NOT use it in other places!
+     *
+     * When preparing user params for user callbacks, we have
+     * to clone these inner data structures to prevent users
+     * from modifying them to effect built-in logic. And for
+     * performance consideration we make this `userOutput` to
+     * avoid clone them too many times.
+     *
+     * @type {Object}
+     * @readOnly
+     */
+    this.userOutput = this._dimensionsSummary.userOutput;
 };
 
 var listProto = List.prototype;
diff --git a/src/data/helper/dimensionHelper.js b/src/data/helper/dimensionHelper.js
index 82e51f7..b0e616c 100644
--- a/src/data/helper/dimensionHelper.js
+++ b/src/data/helper/dimensionHelper.js
@@ -31,6 +31,12 @@ export function summarizeDimensions(data) {
     var defaultedLabel = [];
     var defaultedTooltip = [];
 
+    // See the comment of `List.js#userOutput`.
+    var userOutput = summary.userOutput = {
+        dimensionNames: data.dimensions.slice(),
+        encode: {}
+    };
+
     each(data.dimensions, function (dimName) {
         var dimItem = data.getDimensionInfo(dimName);
 
@@ -39,11 +45,9 @@ export function summarizeDimensions(data) {
             if (__DEV__) {
                 assert(OTHER_DIMENSIONS.get(coordDim) == null);
             }
-            var coordDimArr = encode[coordDim];
-            if (!encode.hasOwnProperty(coordDim)) {
-                coordDimArr = encode[coordDim] = [];
-            }
-            coordDimArr[dimItem.coordDimIndex] = dimName;
+
+            var coordDimIndex = dimItem.coordDimIndex;
+            getOrCreateEncodeArr(encode, coordDim)[coordDimIndex] = dimName;
 
             if (!dimItem.isExtraCoord) {
                 notExtraCoordDimMap.set(coordDim, 1);
@@ -55,6 +59,10 @@ export function summarizeDimensions(data) {
                 if (mayLabelDimType(dimItem.type)) {
                     defaultedLabel[0] = dimName;
                 }
+
+                // User output encode do not contain generated coords.
+                // And it only has index. User can use index to retrieve value from the raw item array.
+                getOrCreateEncodeArr(userOutput.encode, coordDim)[coordDimIndex] = dimItem.index;
             }
             if (dimItem.defaultTooltip) {
                 defaultedTooltip.push(dimName);
@@ -62,14 +70,11 @@ export function summarizeDimensions(data) {
         }
 
         OTHER_DIMENSIONS.each(function (v, otherDim) {
-            var otherDimArr = encode[otherDim];
-            if (!encode.hasOwnProperty(otherDim)) {
-                otherDimArr = encode[otherDim] = [];
-            }
+            var encodeArr = getOrCreateEncodeArr(encode, otherDim);
 
             var dimIndex = dimItem.otherDims[otherDim];
             if (dimIndex != null && dimIndex !== false) {
-                otherDimArr[dimIndex] = dimItem.name;
+                encodeArr[dimIndex] = dimItem.name;
             }
         });
     });
@@ -112,6 +117,13 @@ export function summarizeDimensions(data) {
     return summary;
 }
 
+function getOrCreateEncodeArr(encode, dim) {
+    if (!encode.hasOwnProperty(dim)) {
+        encode[dim] = [];
+    }
+    return encode[dim];
+}
+
 export function getDimensionTypeByAxis(axisType) {
     return axisType === 'category'
         ? 'ordinal'
diff --git a/src/model/mixin/dataFormat.js b/src/model/mixin/dataFormat.js
index 8702d71..1d10e6e 100644
--- a/src/model/mixin/dataFormat.js
+++ b/src/model/mixin/dataFormat.js
@@ -43,6 +43,7 @@ export default {
         var renderMode = getTooltipRenderMode(renderModeOption);
         var mainType = this.mainType;
         var isSeries = mainType === 'series';
+        var userOutput = data.userOutput;
 
         return {
             componentType: mainType,
@@ -58,8 +59,8 @@ export default {
             dataType: dataType,
             value: rawValue,
             color: color,
-            dimensions: data.userOutput.dimensions,
-            encode: data.userOutput.encode,            
+            dimensionNames: userOutput ? userOutput.dimensionNames : null,
+            encode: userOutput ? userOutput.encode : null,
             marker: getTooltipMarker({
                 color: color,
                 renderMode: renderMode
@@ -75,7 +76,8 @@ export default {
      * @param {number} dataIndex
      * @param {string} [status='normal'] 'normal' or 'emphasis'
      * @param {string} [dataType]
-     * @param {number} [dimIndex]
+     * @param {number} [dimIndex] Only used in some chart that
+     *        use formatter in different dimensions, like radar.
      * @param {string} [labelProp='label']
      * @return {string} If not formatter, return null/undefined
      */
diff --git a/test/label-formatter.html b/test/label-formatter.html
new file mode 100644
index 0000000..84810a6
--- /dev/null
+++ b/test/label-formatter.html
@@ -0,0 +1,137 @@
+<!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>
+
+
+
+
+        <script>
+
+            require([
+                'echarts'/*, 'map/js/china' */
+            ], function (echarts) {
+
+                var option = {
+                    dataset: {
+                        dimensions: ['product', '2015', '2016', '2017'],
+                        source: [
+                            {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
+                            {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
+                            {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
+                            {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
+                        ]
+                    },
+                    xAxis: {
+                        type: 'category'
+                    },
+                    yAxis: {},
+                    series: [{
+                        type: 'bar',
+                        label: {
+                            show: true,
+                            formatter: function (params) {
+                                // console.log(params);
+                                return '(' + params.value[params.dimensionNames[params.encode.y[0]]] + ')';
+                            }
+                        }
+                    }]
+                };
+
+                var chart = testHelper.create(echarts, 'main0', {
+                    option: option,
+                    title: [
+                        'label should be (y axis value)'
+                    ]
+                });
+            });
+
+        </script>
+
+
+
+
+
+
+        <script>
+
+            var option;
+
+            require([
+                'echarts'/*, 'map/js/china' */
+            ], function (echarts) {
+
+                var option = {
+                    dataset: {
+                        source: [
+                            ['Matcha Latte', 43.3, 85.8, 93.7],
+                            ['Milk Tea', 83.1, 73.4, 55.1],
+                            ['Cheese Cocoa', 86.4, 65.2, 82.5],
+                            ['Walnut Brownie', 72.4, 53.9, 39.1]
+                        ]
+                    },
+                    xAxis: {
+                        type: 'category'
+                    },
+                    yAxis: {},
+                    series: [{
+                        type: 'bar',
+                        label: {
+                            show: true,
+                            formatter: function (params) {
+                                console.log(params);
+                                return '(' + params.value[params.encode.y[0]] + ')';
+                            }
+                        }
+                    }]
+                };
+
+                var chart = testHelper.create(echarts, 'main1', {
+                    option: option,
+                    title: [
+                        'label should be (y axis value)'
+                    ]
+                });
+            });
+
+        </script>
+
+
+    </body>
+</html>
\ No newline at end of file


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org