Revert "refactor: adapt g perf optimize (#333)"

This reverts commit e0120be.

__tests__/integration/components/axis/axis-animation-update-12.ts

@@ -14,15 +14,15 @@ export const AxisAnimationUpdate12 = () => {
   const g1 = group.appendChild(
     new Group({
       style: {
-        transform: [['translate', 100, 100]],
+        transform: 'translate(100, 100)',
       },
     })
   );
 
   const g2 = group.appendChild(
     new Group({
       style: {
-        transform: [['translate', 50, 50]],
+        transform: 'translate(50, 50)',
       },
     })
   );

__tests__/integration/components/axis/axis-animation-update-13.ts

@@ -13,15 +13,15 @@ export const AxisAnimationUpdate13 = () => {
   group.appendChild(
     new Group({
       style: {
-        transform: [['translate', 100, 100]],
+        transform: 'translate(100, 100)',
       },
     })
   );
 
   const g2 = group.appendChild(
     new Group({
       style: {
-        transform: [['translate', 50, 50]],
+        transform: 'translate(50, 50)',
       },
     })
   );

__tests__/integration/components/axis/axis-linear-custom-tick.ts

@@ -19,7 +19,7 @@ export const AxisLinearCustomTick = () => {
         tickFormatter: (datum: any, index: number, data: any, [cx, cy]: any) => {
           if (index === 3)
             return new Rect({
-              style: { x: 0, y: 0, width: 20, height: 20, fill: 'green', transform: [['translate', -10, -10]] },
+              style: { x: 0, y: 0, width: 20, height: 20, fill: 'green', transform: 'translate(-10, -10)' },
             });
           return index % 5 === 0
             ? new Circle({ style: { cx: 0, cy: 0, r: index % 10 === 0 ? 10 : 5 } })

__tests__/integration/components/axis/axis-linear-label.ts

@@ -43,14 +43,14 @@ export const AxisLinearLabel = () => {
         y: 0,
         width: 30,
         height: 30,
-        transform: [['translate', -15, -15]],
+        transform: 'translate(-15, -15)',
       },
     });
     const labelText = new Text({
       style: {
         text,
         textAlign: 'center',
-        transform: [['translate', 0, 30]],
+        transform: 'translate(0, 30)',
       },
     });
     labelGroup.appendChild(labelIcon);

__tests__/integration/components/axis/axis-linear-title-position.ts

@@ -69,7 +69,7 @@ export const AxisLinearTitlePosition = () => {
   const g2 = group.appendChild(
     new Group({
       style: {
-        transform: [['translate', 60, 60]],
+        transform: 'translate(60, 60)',
       },
     })
   );

__tests__/integration/components/checkbox/checkbox1.ts

@@ -7,7 +7,7 @@ export function Checkbox1() {
   group.appendChild(
     new Checkbox({
       style: {
-        transform: [['translate', 10, 10]],
+        transform: 'translate(10, 10)',
         labelText: 'Checkbox',
       },
     })
@@ -16,7 +16,7 @@ export function Checkbox1() {
   const ck = group.appendChild(
     new Checkbox({
       style: {
-        transform: [['translate', 10, 30]],
+        transform: 'translate(10, 30)',
         labelText: 'Checkbox',
         checked: true,
       },

__tests__/integration/components/indicator/indicator.ts

@@ -6,7 +6,7 @@ import { createGrid } from '../../utils/grid';
 export const IndicatorDemo = () => {
   const group = new Group({
     style: {
-      transform: [['translate', 30, 30]],
+      transform: 'translate(30, 30)',
     },
   });
 

__tests__/integration/components/legend/category-item-5.ts

@@ -26,7 +26,7 @@ export const CategoryItem5 = () => {
               width: 10,
               height: 10,
               transformOrigin: 'center',
-              transform: [['rotate', 45]],
+              transform: 'rotate(45)',
             },
           }),
       },

__tests__/integration/components/legend/category-item-marker-1.ts

@@ -28,7 +28,7 @@ export const CategoryItemMarker1 = () => {
                     width: 10,
                     height: 10,
                     transformOrigin: 'center',
-                    transform: [['rotate', 45]],
+                    transform: 'rotate(45)',
                   },
                 })
             : () =>

__tests__/integration/components/legend/category-position-2.ts

@@ -8,7 +8,7 @@ export const CategoryPosition2 = () => {
   const g = group.appendChild(
     new Group({
       style: {
-        transform: [['translate', 50, 50]],
+        transform: 'translate(50, 50)',
       },
     })
   );

__tests__/integration/components/marker/marker-1.ts

@@ -16,7 +16,7 @@ export const Marker1 = () => {
           y,
           // transform: `translate(${x}, ${y}) rotate(45deg) translate(${-x}, ${-y})`,
           // transformOrigin: `0 0`,
-          transform: [['rotate', 45]],
+          transform: 'rotate(45deg)',
           transformOrigin: `${x} ${y}`,
           symbol: marker,
           size: 16,

__tests__/integration/components/sparkline/sparkline-10.ts

@@ -7,7 +7,7 @@ export const Sparkline10 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        transform: [['translate', 10, 10]],
+        transform: 'translate(10, 10)',
         type: 'column',
         width: 300,
         height: 50,

__tests__/integration/components/sparkline/sparkline-11.ts

@@ -7,7 +7,7 @@ export const Sparkline11 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        transform: [['translate', 10, 10]],
+        transform: 'translate(10, 10)',
         type: 'column',
         width: 300,
         height: 50,

__tests__/integration/components/sparkline/sparkline-12.ts

@@ -7,7 +7,7 @@ export const Sparkline12 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        transform: [['translate', 10, 10]],
+        transform: 'translate(10, 10)',
         type: 'column',
         width: 300,
         height: 50,

__tests__/integration/components/sparkline/sparkline-2.ts

@@ -7,7 +7,7 @@ export const Sparkline2 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        transform: [['translate', 10, 10]],
+        transform: 'translate(10, 10)',
         type: 'line',
         width: 300,
         height: 50,

__tests__/integration/components/sparkline/sparkline-3.ts

@@ -7,7 +7,7 @@ export const Sparkline3 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        transform: [['translate', 10, 10]],
+        transform: 'translate(10, 10)',
         type: 'line',
         width: 300,
         height: 50,

__tests__/integration/components/sparkline/sparkline-4.ts

@@ -7,7 +7,7 @@ export const Sparkline4 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        transform: [['translate', 10, 10]],
+        transform: 'translate(10, 10)',
         type: 'line',
         width: 300,
         height: 50,

__tests__/integration/components/sparkline/sparkline-5.ts

@@ -7,7 +7,7 @@ export const Sparkline5 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        transform: [['translate', 10, 10]],
+        transform: 'translate(10, 10)',
         type: 'line',
         width: 300,
         height: 50,

__tests__/integration/components/sparkline/sparkline-6.ts

@@ -7,7 +7,7 @@ export const Sparkline6 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        transform: [['translate', 10, 10]],
+        transform: 'translate(10, 10)',
         type: 'line',
         width: 300,
         height: 50,

__tests__/integration/components/sparkline/sparkline-7.ts

@@ -7,7 +7,7 @@ export const Sparkline7 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        transform: [['translate', 10, 10]],
+        transform: 'translate(10, 10)',
         type: 'line',
         width: 300,
         height: 50,

__tests__/integration/components/sparkline/sparkline-8.ts

@@ -7,7 +7,7 @@ export const Sparkline8 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        transform: [['translate', 10, 10]],
+        transform: 'translate(10, 10)',
         type: 'column',
         width: 300,
         height: 50,

__tests__/integration/components/sparkline/sparkline-9.ts

@@ -7,7 +7,7 @@ export const Sparkline9 = () => {
   group.appendChild(
     new Sparkline({
       style: {
-        transform: [['translate', 10, 10]],
+        transform: 'translate(10, 10)',
         type: 'column',
         width: 300,
         height: 50,

__tests__/integration/components/sparkline/sparkline-scale-line.ts

@@ -3,7 +3,7 @@ import { it } from '../../utils';
 import { Sparkline } from '../../../../src/ui/sparkline';
 
 export const SparklineScaleLine = it((group) => {
-  const shape1 = { transform: [['translate', 10, 10]], width: 300, height: 50 };
+  const shape1 = { transform: 'translate(10, 10)', width: 300, height: 50 };
   group.appendChild(
     new Rect({
       style: {
@@ -33,7 +33,7 @@ export const SparklineScaleLine = it((group) => {
     })
   );
 
-  const shape2 = { transform: [['translate', 10, 70]], width: 300, height: 50 };
+  const shape2 = { transform: 'translate(10, 70)', width: 300, height: 50 };
 
   group.appendChild(
     new Rect({

__tests__/integration/components/switch/switch-1.ts

@@ -15,7 +15,7 @@ export const Switch1 = () => {
   group.appendChild(
     new Switch({
       style: {
-        transform: [['translateY', 40]],
+        transform: 'translateY(40)',
         checked: true,
       },
     })
@@ -24,7 +24,7 @@ export const Switch1 = () => {
   const sw = group.appendChild(
     new Switch({
       style: {
-        transform: [['translateY', 80]],
+        transform: 'translateY(80)',
         checked: false,
       },
     })

__tests__/integration/components/tag/tag-1.ts

@@ -7,7 +7,7 @@ export const Tag1 = () => {
   group.appendChild(
     new Tag({
       style: {
-        transform: [['translate', 100, 100]],
+        transform: 'translate(100, 100)',
         text: 'G2',
       },
     })
@@ -16,7 +16,7 @@ export const Tag1 = () => {
   group.appendChild(
     new Tag({
       style: {
-        transform: [['translate', 200, 100]],
+        transform: 'translate(200, 100)',
         text: 'G6',
         backgroundFill: '#DBF1B7',
         labelFill: 'red',
@@ -32,7 +32,7 @@ export const Tag1 = () => {
   const tag = group.appendChild(
     new Tag({
       style: {
-        transform: [['translate', 300, 100]],
+        transform: 'translate(300, 100)',
         text: 'L7',
         radius: 6,
         padding: [6, 24],

__tests__/integration/components/title/title.ts

@@ -54,7 +54,7 @@ export const TitleDemo = () => {
     {
       text: 'left top start',
       position: 'left-top',
-      transform: [['rotate', 90]],
+      transform: 'rotate(90)',
       textAlign: 'start',
       textBaseline: 'bottom',
     }