refactor(runtime): init scale instances only once

antvis · Jul 19, 2024 · 4eb64d7 · 4eb64d7
1 parent eadad96
commit 4eb64d7
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 6 deletions.
diff --git a/__tests__/plots/static/index.ts b/__tests__/plots/static/index.ts
@@ -343,3 +343,4 @@ export { mockPieSpiderMany } from './mock-pie-spider-many';
 export { mockPieSpiderHide } from './mock-pie-spider-hide';
 export { mockPieSpiderExceed } from './mock-pie-spider-exceed';
 export { mockFacetPieLegend } from './mock-facet-pie-legend';
+export { weatherLineMultiAxesSync } from './weather-line-multi-axes-sync';
diff --git a/__tests__/plots/static/weather-line-multi-axes-sync.ts b/__tests__/plots/static/weather-line-multi-axes-sync.ts
@@ -0,0 +1,72 @@
+import { G2Spec } from '../../../src';
+import { weather } from '../../data/weather';
+
+export function weatherLineMultiAxesSync(): G2Spec {
+  return {
+    type: 'view',
+    data: weather,
+    children: [
+      {
+        type: 'line',
+        encode: {
+          x: 'Month',
+          y: 'Temperature',
+          color: '#EE6666',
+          shape: 'smooth',
+        },
+        scale: {
+          y: { independent: true, syncTicks: true },
+        },
+        axis: {
+          y: {
+            title: 'Temperature (°C)',
+            titleFill: '#EE6666',
+          },
+        },
+      },
+      {
+        type: 'interval',
+        encode: {
+          x: 'Month',
+          y: 'Evaporation',
+          color: '#5470C6',
+          series: () => 'Evaporation',
+        },
+        scale: {
+          y: { independent: true },
+        },
+        style: {
+          fillOpacity: 0.8,
+        },
+        axis: {
+          y: {
+            position: 'right',
+            title: 'Temperature (°C)',
+            titleFill: '#5470C6',
+          },
+        },
+      },
+      {
+        type: 'interval',
+        encode: {
+          x: 'Month',
+          y: 'Precipitation',
+          color: '#91CC75',
+          series: () => 'Precipitation',
+        },
+        scale: {
+          y: { independent: true },
+        },
+        axis: {
+          y: {
+            position: 'right',
+            title: 'Precipitation (ml)',
+            titleFill: '#91CC75',
+          },
+        },
+      },
+    ],
+  };
+}
+
+weatherLineMultiAxesSync.skip = true;
diff --git a/src/runtime/plot.ts b/src/runtime/plot.ts
@@ -671,6 +671,7 @@ async function initializeMarks(
     const values = channels.flatMap(({ values }) => values.map((d) => d.value));
     const scale = {
       ...inferScale(name, values, options, coordinates, theme, library),
+      uid: Symbol('scale'),
       key: scaleKey,
     };
     channels.forEach((channel) => (channel.scale = scale));
@@ -745,6 +746,17 @@ function initializeState(
   // AxisZ need a copy of axisX and axisY to show grids in X-Z & Y-Z planes.
   processAxisZ(components);
 
+  // Index scale instance by uid.
+  const uidScale = new Map(
+    Array.from(markState.values()).flatMap((state) => {
+      const { channels } = state;
+      return channels.map(({ scale }) => [
+        scale.uid,
+        useRelationScale(scale, library),
+      ]);
+    }),
+  );
+
   // Scale from marks and components.
   const scaleInstance: Record<string, Scale> = {};
 
@@ -753,8 +765,8 @@ function initializeState(
     const { scales: scaleDescriptors = [] } = component;
     const scales = [];
     for (const descriptor of scaleDescriptors) {
-      const { name } = descriptor;
-      const scale = useRelationScale(descriptor, library);
+      const { name, uid } = descriptor;
+      const scale = uidScale.get(uid) ?? useRelationScale(descriptor, library);
       scales.push(scale);
       // Delivery the scale of axisX to the AxisY,
       // in order to calculate the angle of axisY component when rendering radar chart.
@@ -766,7 +778,6 @@ function initializeState(
       }
       assignScale(scaleInstance, { [name]: scale });
     }
-
     component.scaleInstances = scales;
   }
 
@@ -791,9 +802,7 @@ function initializeState(
       channels.map(({ name, scale }) => [name, scale]),
     );
     // Transform abstract value to visual value by scales.
-    const markScaleInstance = mapObject(scale, (options) => {
-      return useRelationScale(options, library);
-    });
+    const markScaleInstance = mapObject(scale, ({ uid }) => uidScale.get(uid));
     assignScale(scaleInstance, markScaleInstance);
     const value = applyScale(channels, markScaleInstance);