feat(legend): 图例支持多行分页 (#239)

* feat(legend): 图例支持多行分页 * refactor: 修改图例最大行数的属性命名 maxRow
antvis · Jul 28, 2021 · 1bbb053 · 1bbb053
1 parent 7588ddb
commit 1bbb053
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/src/legend/category.ts b/src/legend/category.ts
@@ -503,7 +503,7 @@ class Category extends LegendBase<CategoryLegendCfg> implements IList {
     let maxItemWidth = 0;
 
     if (layout === 'horizontal') {
-      this.pageHeight = itemHeight * (this.get('flipPageRows') || 1);
+      this.pageHeight = itemHeight * (this.get('maxRow') || 1);
       each(subGroups, (item) => {
         const bbox = item.getBBox();
         const width = itemWidth || bbox.width;
@@ -591,8 +591,8 @@ class Category extends LegendBase<CategoryLegendCfg> implements IList {
       });
     }
     // 重新计算 totalPagesCnt
-    if (layout === 'horizontal' && this.get('flipPageRows')) {
-      this.totalPagesCnt = Math.ceil(pages / this.get('flipPageRows'));
+    if (layout === 'horizontal' && this.get('maxRow')) {
+      this.totalPagesCnt = Math.ceil(pages / this.get('maxRow'));
     } else {
       this.totalPagesCnt = pages;
     }

diff --git a/src/types.ts b/src/types.ts
@@ -610,7 +610,7 @@ export interface CategoryLegendCfg extends LegendBaseCfg {
    /**
     * 翻页行数（只适用于横向） 
     */
-   flipPageRows?: number;
+   maxRow?: number;
   /**
    * 分页器配置
    * @type {LegendPageNavigatorCfg}

diff --git a/tests/unit/legend/category-flippage-spec.ts b/tests/unit/legend/category-flippage-spec.ts
@@ -80,13 +80,13 @@ describe('test category legend', () => {
       let itemGroup = legend.getElementById('c-legend-item-group');
       expect(itemGroup.getParent().getClip().getBBox().height).toBe(12)
 
-      legend.update({ flipPageRows: 2 });
+      legend.update({ maxRow: 2 });
       itemGroup = legend.getElementById('c-legend-item-group');
       expect(itemGroup.getParent().getClip().getBBox().height).toBe(24)
     });
 
-    it('flipPageRows', () => {
-      legend.update({ flipPageRows: 3 });
+    it('maxRow', () => {
+      legend.update({ maxRow: 3 });
       const itemGroup = legend.getElementById('c-legend-item-group');
       expect(itemGroup.getParent().getClip().getBBox().height).toBe(36)
     });