refactor(sync-scale): use Map for perf

src/chart/util/scale-pool.ts

@@ -16,9 +16,9 @@ interface ScaleMeta {
 /** @ignore */
 export class ScalePool {
   /** 所有的 scales */
-  private scales: Record<string, ScaleMeta> = {};
+  private scales = new Map<string, ScaleMeta>();
   /** 需要同步的 scale 分组， key: scaleKeyArray */
-  private syncScales: Record<string, string[]> = {};
+  private syncScales= new Map<string, string[]>();
 
   /**
    * 创建 scale
@@ -57,7 +57,7 @@ export class ScalePool {
    */
   public sync() {
     // 对于 syncScales 中每一个 syncKey 下面的 scale 数组进行同步处理
-    each(this.syncScales, (scaleKeys: string[], syncKey: string) => {
+    this.syncScales.forEach((scaleKeys: string[], syncKey: string) => {
       // min, max, values
       let min = Number.MAX_SAFE_INTEGER;
       let max = Number.MIN_SAFE_INTEGER;
@@ -105,7 +105,6 @@ export class ScalePool {
    */
   private cacheScale(scale: Scale, scaleDef: ScaleOption, key: string) {
     // 1. 缓存到 scales
-
     let sm = this.getScaleMeta(key);
     // 存在则更新，同时检测类型是否一致
     if (sm && sm.scale.type === scale.type) {
@@ -119,7 +118,7 @@ export class ScalePool {
         scaleDef,
       };
 
-      this.scales[key] = sm;
+      this.scales.set(key, sm);
     }
 
     // 2. 缓存到 syncScales，构造 Record<sync, string[]> 数据结构
@@ -131,10 +130,12 @@ export class ScalePool {
     // 存在 sync 标记才进行 sync
     if (syncKey) {
       // 不存在这个 syncKey，则创建一个空数组
-      if (!this.syncScales[syncKey]) {
-        this.syncScales[syncKey] = [];
+      let scaleKeys = this.syncScales.get(syncKey);
+      if (!scaleKeys) {
+        scaleKeys = []
+        this.syncScales.set(syncKey, scaleKeys);
       }
-      this.syncScales[syncKey].push(key);
+      scaleKeys.push(key);
     }
   }
 
@@ -146,8 +147,9 @@ export class ScalePool {
     let scaleMeta = this.getScaleMeta(key);
     if (!scaleMeta) {
       const field = last(key.split('-'));
-      if (this.syncScales[field] && this.syncScales[field].length) {
-        scaleMeta = this.getScaleMeta(this.syncScales[field][0]);
+      const scaleKeys = this.syncScales.get(field);
+      if (scaleKeys && scaleKeys.length) {
+        scaleMeta = this.getScaleMeta(scaleKeys[0]);
       }
     }
     return scaleMeta && scaleMeta.scale;
@@ -157,24 +159,24 @@ export class ScalePool {
    * 清空
    */
   public clear() {
-    this.scales = {};
-    this.syncScales = {};
+    this.scales.clear();
+    this.syncScales.clear();
   }
 
   /**
    * 删除 sync scale 引用
    * @param key
    */
   private removeFromSyncScales(key: string) {
-    each(this.syncScales, (scaleKeys: string[], syncKey: string) => {
+    this.syncScales.forEach((scaleKeys: string[], syncKey: string) => {
       const idx = scaleKeys.indexOf(key);
 
       if (idx !== -1) {
         scaleKeys.splice(idx, 1);
 
         // 删除空数组值
         if (scaleKeys.length === 0) {
-          delete this.syncScales[syncKey];
+          this.syncScales.delete(syncKey);
         }
 
         return false; // 跳出循环
@@ -200,6 +202,6 @@ export class ScalePool {
    * @param key
    */
   private getScaleMeta(key: string): ScaleMeta {
-    return this.scales[key];
+    return this.scales.get(key);
   }
 }

tests/unit/chart/chart-spec.ts

@@ -153,7 +153,7 @@ describe('Chart', () => {
     // @ts-ignore
     expect(chart.filteredData).toEqual([]);
     // @ts-ignore
-    expect(chart.scalePool.scales).toEqual({});
+    expect(chart.scalePool.scales.size).toBe(0);
     expect(!!chart.getCoordinate()).toBe(false);
 
     // @ts-ignore

tests/unit/chart/view/scale-sync/multi-view-sync-scale-spec.ts

@@ -66,9 +66,9 @@ describe('sync scale with multi-view', () => {
     expect(v2Profit.min).toBe(0);
     expect(v2Profit.max).toBe(80);
     // @ts-ignore
-    expect(Object.keys(chart.scalePool.scales).length).toBe(7);
+    expect(chart.scalePool.scales.size).toBe(7);
     // @ts-ignore
-    expect(Object.keys(chart.scalePool.syncScales).length).toBe(0);
+    expect(chart.scalePool.syncScales.size).toBe(0);
   });
 
   it('sync scale, and update', () => {
@@ -114,9 +114,12 @@ describe('sync scale with multi-view', () => {
     // v1sale 和 v2sale 不同步
     expect(v1Sale.max).not.toBe(v2Sale.max);
     // @ts-ignore
-    expect(Object.keys(chart.scalePool.syncScales)).toStrictEqual(['city', 'sale', 'value']);
-    // @ts-ignore
-    expect(chart.scalePool.syncScales.value.length).toBe(2);
+    const syncScales = chart.scalePool.syncScales;
+    expect(syncScales.get('city')).toBeDefined();
+    expect(syncScales.get('sale')).toBeDefined();
+    expect(syncScales.get('value')).toBeDefined();
+    expect(syncScales.size).toBe(3);
+    expect(syncScales.get('value').length).toBe(2);
 
     // @ts-ignore
     expect(chart.scalePool.getScaleMeta('view2-sale').scaleDef.sync).toBe(true);
@@ -131,7 +134,7 @@ describe('sync scale with multi-view', () => {
 
     // 分类 scale 在同步之后，进行调整左右 range
     // @ts-ignore
-    expect(chart.scalePool.scales['view3-city'].scale.range).toEqual([0.125, 0.875]);
+    expect(chart.scalePool.scales.get('view3-city').scale.range).toEqual([0.125, 0.875]);
   });
 
   it('sync = false', () => {
@@ -165,9 +168,9 @@ describe('sync scale with multi-view', () => {
     expect(v1Sale.max).not.toBe(v2Profit.max);
     expect(v2Sale.max).not.toBe(v2Profit.max);
     // @ts-ignore
-    expect(Object.keys(chart.scalePool.scales).length).toBe(7);
+    expect(chart.scalePool.scales.size).toBe(7);
     // @ts-ignore
-    expect(Object.keys(chart.scalePool.syncScales).length).toBe(0);
+    expect(chart.scalePool.syncScales.size).toBe(0);
     // @ts-ignore
     expect(chart.scalePool.getScaleMeta('view2-sale').scaleDef.sync).toBe(false);
   });

tests/unit/chart/view/scale-sync/simple-sync-scale-spec.ts

@@ -34,9 +34,9 @@ describe('sync scale', () => {
     expect(profit.min).toBe(3);
     expect(profit.max).toBe(130);
     // @ts-ignore
-    expect(Object.keys(chart.scalePool.scales).length).toBe(4);
+    expect(chart.scalePool.scales.size).toBe(4);
     // @ts-ignore
-    expect(Object.keys(chart.scalePool.syncScales).length).toBe(0);
+    expect(chart.scalePool.syncScales.size).toBe(0);
   });
 
   it('sync scale, and update', () => {
@@ -60,9 +60,9 @@ describe('sync scale', () => {
     expect(profit.min).toBe(0);
     expect(profit.max).toBe(310);
     // @ts-ignore
-    expect(Object.keys(chart.scalePool.syncScales).length).toBe(1);
+    expect(chart.scalePool.syncScales.size).toBe(1);
     // @ts-ignore
-    expect(chart.scalePool.syncScales.value.length).toBe(2);
+    expect(chart.scalePool.syncScales.get('value').length).toBe(2);
   });
 
   it('sync = false', () => {
@@ -86,9 +86,9 @@ describe('sync scale', () => {
     expect(profit.min).toBe(3);
     expect(profit.max).toBe(130);
     // @ts-ignore
-    expect(Object.keys(chart.scalePool.scales).length).toBe(4);
+    expect(chart.scalePool.scales.size).toBe(4);
     // @ts-ignore
-    expect(Object.keys(chart.scalePool.syncScales).length).toBe(0);
+    expect(chart.scalePool.syncScales.size).toBe(0);
   });
 
   afterAll(() => {