Add more method

bin/config.js

@@ -36,6 +36,7 @@ exports.data_shu = exports.without([
 
 exports.data_mofang = exports.without([
   'deps/raphael.js',
+  'deps/underscore-1.4.2.js',
   'deps/jquery-1.7.1.js'
 ]);
 

lib/charts/legend.js

@@ -1,4 +1,4 @@
-/*global Raphael, d3, $, define, _ */
+/*global Raphael, $, define, _ */
 /*!
  * StreamLegend的兼容定义
  */
@@ -39,11 +39,12 @@
           required: true,
           index: 2
       };
+      this.init();
     }
   });
 
   Legend.prototype.init = function () {
-    var conf = this.owner.defaults;
+    var conf = this.defaults;
     this.legend = $("<div></div>");
     this.legend.css({
       "overflow": "hidden",
@@ -51,6 +52,7 @@
       "width": conf.leftLegendWidth - this.legendIndent + "px"
     });
     this.node.append(this.legend);
+    this.initEvents();
   };
 
   Legend.prototype.setSource = function (source, map) {
@@ -58,12 +60,24 @@
     this.list = _.keys(_.groupBy(source, map.type));
   };
 
-  Legend.prototype.render = function () {
+  Legend.prototype.initEvents = function () {
+    var that = this;
+    that.on('hoverIn', function (index) {
+      that.highlight(index);
+    }).on('hoverOut', function (index) {
+      that.lowlight(index);
+    }).on('level_changed', function (start, end, needMore) {
+      that.render(start, end, needMore);
+    });
+  };
+
+  Legend.prototype.render = function (level) {
+    var conf = this.defaults;
+    conf.level = level || 0;
     var that = this;
-    this.init();
     this.clear();
     this.legends = [];
-    var colorFunc = this.defaults.colorFunc,
+    var colorFunc = conf.colorFunc,
       hoverIn = function (e) {
         var index = e.data.index;
         that.fire('hoverIn', index);
@@ -74,20 +88,23 @@
         that.fire('hoverOut', index);
         this.lowlight(index);
       };
-
-    that.on('hoverIn', function (index) {
-      that.highlight(index);
-    }).on('hoverOut', function (index) {
-      that.lowlight(index);
-    });
-
     var ul = $("<ul></ul>").css({
       "margin": "0 0 0 10px",
-      "paddingLeft": 0 
+      "paddingLeft": 0
     });
-    for (var i = 0, l = this.list.length; i < l && i < this.legendIndent; i++) {
+
+    var selected;
+    if (!conf.more) {
+      selected = this.list.slice(0);
+    } else {
+      selected = DataV.more(this.list, conf.level, conf.max, function () {
+        return conf.moreLabel;
+      });
+    }
+
+    for (var i = 0, l = selected.length; i < l; i++) {
       var color = colorFunc(i);
-      var li = $('<li style="color: ' + color + '"><span style="color: black">' + this.list[i] + '</span></li>');
+      var li = $('<li style="color: ' + color + '"><span style="color: black">' + selected[i] + '</span></li>');
       li.mouseenter({"index": i}, $.proxy(hoverIn, this)).mouseleave({"index": i}, $.proxy(hoverOut, this));
       ul.append(li);
       this.legends.push(li);

lib/charts/path_label.js

@@ -42,6 +42,7 @@
 
   PathLabel.prototype.render = function () {
     this.clear();
+    var that = this;
     var owner = this.owner;
     var paths = owner.paths;
     var conf = this.defaults;
@@ -108,11 +109,24 @@
     };
 
     var getPathLabel = this.defaults.getPathLabel || this.getPathLabel;
+    var selected;
+    var values = _.values(this.groupedByType);
+    if (!conf.more) {
+      selected = values.slice(0);
+    } else {
+      selected = DataV.more(values, conf.level, conf.max, function (remains) {
+        var obj = {};
+        obj.type = conf.moreLabel;
+        obj.rank = remains[0].rank;
+        obj.sum = DataV.sum(remains, "sum");
+        return obj;
+      });
+    }
     for (var i = 0, l = paths.length; i < l; i++) {
       var path = paths[i];
-      var row = this.groupedByType[this.types[i]];
+      var row = selected[i];
       var obj = {
-        type: this.types[i],
+        type: row.type,
         rank: row.rank,
         sum: row.sum,
         total: this.total
@@ -134,18 +148,23 @@
       } else {
         label.attr({"opacity": 0});
       }
-      if (i === 0) {
-        path.attr({"cursor": "pointer"});
-        label.attr({"cursor": "pointer"});
-      } else {
-        path.attr({"cursor": "auto"});
-        label.attr({"cursor": "auto"});
-      }
+
+      path.attr({"cursor": "auto"});
+      label.attr({"cursor": "auto"});
       labels.push(label);
     }
     this.labels = labels;
   };
 
+  /**
+   * 生成标签的默认方法，可以通过`setOption({getPathLable: function});`覆盖。
+   * Properties:
+   * - `type`, 条带类型
+   * - `rank`, 条带排名
+   * - `sum`, 当前条带总值
+   * - `total`, 所有条带总值
+   * @param {Object} obj 当前条带的对象
+   */
   PathLabel.prototype.getPathLabel = function (obj) {
     return obj.type + " " + "排名: 第" + obj.rank;
   };
@@ -179,6 +198,7 @@
     var sorted = _.sortBy(this.groupedByType, function (group, type) {
       var sum = DataV.sum(group, that.mapping.value);
       that.groupedByType[type].sum = sum;
+      that.groupedByType[type].type = type;
       return -sum;
     });
     this.types = _.keys(this.groupedByType);

lib/charts/stream.js

@@ -67,7 +67,8 @@
     this.rawData = source;
     this.rawMap = map;
     this.grouped = _.groupBy(source, this.mapping.x);
-    this.layoutData = this.remapSource(source);
+    this.remaped = this.remapSource(source);
+    this.layoutData = this.getLayoutData();
   };
 
   Stream.prototype.remapSource = function () {
@@ -91,6 +92,31 @@
     }
     return remap;
   };
+
+  /*!
+   * 获取等级数据
+   */
+  Stream.prototype.getLayoutData = function () {
+    var conf = this.defaults;
+    var remaped = this.remaped;
+    var that = this;
+
+    if (!conf.more) {
+      return remaped;
+    } else {
+      return DataV.more(remaped, conf.level, conf.max, function (remains) {
+        var obj = [];
+        for (var i = 0; i < that.columnCount; i++) {
+          obj.push({
+            x: i,
+            y: DataV.sum(_.pluck(remains, i), 'y')
+          });
+        }
+        return obj;
+      });
+    }
+  };
+
   Stream.prototype.layout = function () {
     var conf = this.defaults;
     d3.layout.stack().offset(conf.offset).order(conf.order)(this.layoutData);
@@ -249,7 +275,7 @@
   /*
    */
   Stream.prototype.getColor = function () {
-    var count = this.defaults.colorCount;
+    var count = this.layoutData.length;
     var color = this.defaults.gradientColor || ["#8be62f", "#1F4FD8"];
     var gradientColor = DataV.gradientColor(color, "special");
     var percent = 1 / count;

lib/components/stream.js

@@ -1,4 +1,4 @@
-/*global Raphael, d3, $, define, _ */
+/*global $, define */
 /*!
  * Stream的兼容定义
  */
@@ -61,6 +61,9 @@
       this.defaults.legendBesidesWidth = undefined;
       this.defaults.legendBesidesHeight = undefined;
 
+      this.defaults.more = false;
+      this.defaults.moreLabel = "more";
+      this.defaults.max = 20;
       this.defaults.level = 0;
 
       this.defaults.chartWidth = undefined;//depends on width, do not recommend to change
@@ -143,6 +146,8 @@
       that.tip.setContent(rowIndex, columnIndex);
       //axis pop bubble
       that.axis.refreshTab(columnIndex);
+    }).on('level_changed', function (start, end, needMore) {
+      that.legend.fire('level_changed', start, end, needMore);
     });
   };
 

lib/datav.js

@@ -659,5 +659,29 @@
         return count;
     };
 
+    DataV.more = function (list, level, step, last) {
+        var selected;
+        var start = level * step, end;
+        last = last || function (remains) {
+            return remains[0];
+        };
+
+        var needMoreRow;
+        if (start + step >= list.length) {
+            needMoreRow = false;
+            end = list.length - 1;
+        } else {
+            needMoreRow = true;
+            end = start + step - 1;
+        }
+        if (!needMoreRow) {
+            selected = list.slice(start);
+        } else {
+            selected = list.slice(start, end);
+            selected.push(last(list.slice(end)));
+        }
+        return selected;
+    };
+
     return DataV;
 });