feat: add bar width edit control with transMatrix

VisActor · Oct 9, 2024 · 7c7ad25 · 7c7ad25
1 parent 421655d
commit 7c7ad25
Show file tree

Hide file tree

Showing 8 changed files with 339 additions and 87 deletions.
diff --git a/packages/vstory/demo/src/demos/VChartGraphic.tsx b/packages/vstory/demo/src/demos/VChartGraphic.tsx
@@ -526,46 +526,279 @@ const spec = {
 };
 
 const spec1 = {
-  type: 'bar',
-  background: 'transparent',
-  data: {
-    values: [
-      { type: 'Nail polish', country: 'Africa', value: 4229 },
-      { type: 'Nail polish', country: 'EU', value: 4376 },
-      { type: 'Nail polish', country: 'China', value: 3054 },
-      { type: 'Nail polish', country: 'USA', value: 12814 },
-      { type: 'Eyebrow pencil', country: 'Africa', value: 3932 },
-      { type: 'Eyebrow pencil', country: 'EU', value: 3987 },
-      { type: 'Eyebrow pencil', country: 'China', value: 5067 },
-      { type: 'Eyebrow pencil', country: 'USA', value: 13012 },
-      { type: 'Rouge', country: 'Africa', value: 5221 },
-      { type: 'Rouge', country: 'EU', value: 3574 },
-      { type: 'Rouge', country: 'China', value: 7004 },
-      { type: 'Rouge', country: 'USA', value: 11624 },
-      { type: 'Lipstick', country: 'Africa', value: 9256 },
-      { type: 'Lipstick', country: 'EU', value: 4376 },
-      { type: 'Lipstick', country: 'China', value: 9054 },
-      { type: 'Lipstick', country: 'USA', value: 8814 },
-      { type: 'Eyeshadows', country: 'Africa', value: 3308 },
-      { type: 'Eyeshadows', country: 'EU', value: 4572 },
-      { type: 'Eyeshadows', country: 'China', value: 12043 },
-      { type: 'Eyeshadows', country: 'USA', value: 12998 }
-    ]
+  direction: 'vertical',
+  type: 'common',
+  color: ['#00295C', '#2568BD', '#9F9F9F', '#C5C5C5', '#00B0F0', '#4BCFFF', '#C2C2C2', '#D7D7D7'],
+  series: [
+    {
+      type: 'bar',
+      stack: true,
+      direction: 'vertical',
+      bar: {
+        style: {
+          stroke: '',
+          lineWidth: 1
+        },
+        state: {
+          hover: {
+            stroke: '#000',
+            lineWidth: 1
+          }
+        }
+      },
+      barBackground: {
+        style: {
+          stroke: '',
+          lineWidth: 1
+        }
+      },
+      label: {
+        visible: true,
+        position: 'inside',
+        style: {
+          lineHeight: '100%',
+          fontSize: 16,
+          fontWeight: 'bold'
+        },
+        overlap: {
+          strategy: []
+        },
+        smartInvert: true,
+        formatConfig: {},
+        interactive: true
+      },
+      xField: ['_editor_dimension_field', '_editor_type_field'],
+      yField: '_editor_value_field',
+      dataId: '0',
+      id: 'series-0',
+      EDITOR_SERIES_DATA_KEY: 'a',
+      seriesField: '_editor_type_field'
+    },
+    {
+      type: 'bar',
+      stack: true,
+      direction: 'vertical',
+      bar: {
+        style: {
+          stroke: '',
+          lineWidth: 1
+        },
+        state: {
+          hover: {
+            stroke: '#000',
+            lineWidth: 1
+          }
+        }
+      },
+      barBackground: {
+        style: {
+          stroke: '',
+          lineWidth: 1
+        }
+      },
+      label: {
+        visible: true,
+        position: 'inside',
+        style: {
+          lineHeight: '100%',
+          fontSize: 16,
+          fontWeight: 'bold'
+        },
+        overlap: {
+          strategy: []
+        },
+        smartInvert: true,
+        formatConfig: {},
+        interactive: true
+      },
+      xField: ['_editor_dimension_field', '_editor_type_field'],
+      yField: '_editor_value_field',
+      dataId: '1',
+      id: 'series-1',
+      EDITOR_SERIES_DATA_KEY: 'b',
+      seriesField: '_editor_type_field'
+    }
+  ],
+  legends: {
+    id: 'legend-discrete',
+    visible: false,
+    autoPage: false,
+    position: 'start',
+    interactive: false,
+    item: {
+      label: {
+        style: {
+          fill: '#1F2329',
+          fontSize: 16
+        }
+      }
+    },
+    _originalVisible: false
+  },
+  region: [
+    {
+      id: 'region-0'
+    }
+  ],
+  tooltip: {
+    visible: true,
+    mark: {
+      content: [{}],
+      title: {}
+    },
+    dimension: {
+      content: [{}],
+      title: {}
+    }
   },
-  xField: ['type', 'country'],
-  yField: 'value',
-  seriesField: 'country',
-  legends: [{ visible: true, position: 'middle', orient: 'bottom' }],
   axes: [
     {
       orient: 'left',
+      id: 'axis-left',
+      type: 'linear',
       label: {
-        formatMethod(val) {
-          return `${(val * 100).toFixed(2)}%`;
+        autoLimit: false,
+        style: {
+          fill: '#1F2329',
+          fontSize: 16
+        },
+        formatConfig: {}
+      },
+      domainLine: {
+        visible: true,
+        style: {
+          stroke: '#000000'
+        }
+      },
+      tick: {
+        visible: true,
+        style: {
+          stroke: '#000000'
+        }
+      },
+      grid: {
+        visible: false,
+        style: {
+          stroke: '#bbbfc4'
+        }
+      },
+      autoIndent: false,
+      maxWidth: null,
+      maxHeight: null
+    },
+    {
+      orient: 'bottom',
+      id: 'axis-bottom',
+      type: 'band',
+      label: {
+        autoLimit: false,
+        style: {
+          fill: '#1F2329',
+          fontSize: 16
+        },
+        formatConfig: {}
+      },
+      domainLine: {
+        visible: true,
+        style: {
+          stroke: '#000000'
+        },
+        onZero: true
+      },
+      tick: {
+        visible: true,
+        style: {
+          stroke: '#000000'
+        }
+      },
+      grid: {
+        visible: false,
+        style: {
+          stroke: '#bbbfc4'
+        }
+      },
+      autoIndent: false,
+      maxWidth: null,
+      maxHeight: null,
+      trimPadding: false,
+      paddingInner: [0.18791312559017942, 0],
+      paddingOuter: [0.18791312559017942, 0]
+    }
+  ],
+  data: [
+    {
+      id: '0',
+      sourceKey: 'a',
+      values: [
+        {
+          _editor_dimension_field: 'x1',
+          _editor_value_field: 20,
+          _editor_type_field: 'a'
+        },
+        {
+          _editor_dimension_field: 'x2',
+          _editor_value_field: 23,
+          _editor_type_field: 'a'
+        },
+        {
+          _editor_dimension_field: 'x3',
+          _editor_value_field: 26,
+          _editor_type_field: 'a'
+        }
+      ],
+      specField: {
+        _editor_dimension_field: {
+          type: 'dimension',
+          order: 0
+        },
+        _editor_type_field: {
+          type: 'series',
+          order: 0
+        },
+        _editor_value_field: {
+          type: 'value',
+          order: 0
+        }
+      }
+    },
+    {
+      id: '1',
+      sourceKey: 'b',
+      values: [
+        {
+          _editor_dimension_field: 'x1',
+          _editor_value_field: 20,
+          _editor_type_field: 'b'
+        },
+        {
+          _editor_dimension_field: 'x2',
+          _editor_value_field: 24,
+          _editor_type_field: 'b'
+        },
+        {
+          _editor_dimension_field: 'x3',
+          _editor_value_field: 29,
+          _editor_type_field: 'b'
+        }
+      ],
+      specField: {
+        _editor_dimension_field: {
+          type: 'dimension',
+          order: 0
+        },
+        _editor_type_field: {
+          type: 'series',
+          order: 0
+        },
+        _editor_value_field: {
+          type: 'value',
+          order: 0
         }
       }
     }
-  ]
+  ],
+  labelLayout: 'region',
+  background: 'transparent'
 };
 
 const storySpec: IStorySpec = {
@@ -673,7 +906,7 @@ const storySpec: IStorySpec = {
         height: 400
       },
       options: {
-        spec: spec,
+        spec: spec1,
         initOption: {
           animation: false,
           interactive: true,

diff --git a/packages/vstory/src/edit/edit-component/base-selection.ts b/packages/vstory/src/edit/edit-component/base-selection.ts
@@ -26,7 +26,7 @@ export abstract class BaseSelection implements IEditComponent {
   declare type: string;
 
   protected _initOverGraphic() {
-    this._overGraphic = createGroup({ pickable: false });
+    this._overGraphic = createGroup({ pickable: false, visible: false });
   }
 
   endEdit(emitEvent: boolean = true): void {