feat: add axis innerOffset config

VisActor · Feb 2, 2024 · 05785b7 · 05785b7
1 parent dcec5d8
commit 05785b7
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 64 deletions.
diff --git a/common/changes/@visactor/vtable/feat-axis-innerOffset_2024-02-02-10-36.json b/common/changes/@visactor/vtable/feat-axis-innerOffset_2024-02-02-10-36.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vtable",
+      "comment": "feat: add axis innerOffset config",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vtable"
+}
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
diff --git a/docs/package.json b/docs/package.json
@@ -13,7 +13,7 @@
     "@visactor/vtable": "workspace:*",
     "@visactor/vtable-editors": "workspace:*",
     "@visactor/vtable-export": "workspace:*",
-    "@visactor/vchart": "1.9.0",
+    "@visactor/vchart": "1.9.1",
     "markdown-it": "^13.0.0",
     "highlight.js": "^11.8.0",
     "axios": "^1.4.0",

diff --git a/packages/react-vtable/package.json b/packages/react-vtable/package.json
@@ -52,7 +52,7 @@
     "react-is": "^18.2.0"
   },
   "devDependencies": {
-    "@visactor/vchart": "1.9.0",
+    "@visactor/vchart": "1.9.1",
     "@internal/bundler": "workspace:*",
     "@internal/eslint-config": "workspace:*",
     "@internal/ts-config": "workspace:*",
@@ -96,4 +96,4 @@
     "axios": "^1.4.0",
     "@types/react-is": "^17.0.3"
   }
-}
+}
diff --git a/packages/vtable-export/package.json b/packages/vtable-export/package.json
@@ -40,7 +40,7 @@
     "exceljs": "4.4.0"
   },
   "devDependencies": {
-    "@visactor/vchart": "1.9.0",
+    "@visactor/vchart": "1.9.1",
     "@internal/bundler": "workspace:*",
     "@internal/eslint-config": "workspace:*",
     "@internal/ts-config": "workspace:*",
@@ -85,4 +85,4 @@
     "@types/react-is": "^17.0.3",
     "rollup-plugin-node-resolve": "5.2.0"
   }
-}
+}
diff --git a/packages/vtable/examples/pivot-chart/pivotChart.ts b/packages/vtable/examples/pivot-chart/pivotChart.ts
@@ -124,8 +124,25 @@ export function createTable() {
         yField: '230417171050011',
         seriesField: '230417171050030',
         axes: [
-          { orient: 'left', visible: true, label: { visible: true } },
-          { orient: 'bottom', visible: true }
+          {
+            orient: 'left',
+            visible: true,
+            label: {
+              visible: true
+            },
+            innerOffset: {
+              top: 20,
+              bottom: 20
+            }
+          },
+          {
+            orient: 'bottom',
+            visible: true,
+            innerOffset: {
+              left: 20,
+              right: 20
+            }
+          }
         ],
         bar: {
           state: {
@@ -226,7 +243,15 @@ export function createTable() {
         ],
         axes: [
           { orient: 'left', visible: true, label: { visible: true } },
-          { orient: 'bottom', visible: true }
+
+          {
+            orient: 'bottom',
+            visible: true,
+            innerOffset: {
+              left: 20,
+              right: 20
+            }
+          }
         ],
         theme: {
           // axis: {
@@ -272,7 +297,14 @@ export function createTable() {
         seriesField: '230417171050030',
         axes: [
           { orient: 'left', visible: true, label: { visible: true } },
-          { orient: 'bottom', visible: true }
+          {
+            orient: 'bottom',
+            visible: true,
+            innerOffset: {
+              left: 20,
+              right: 20
+            }
+          }
         ],
         line: {
           state: {

diff --git a/packages/vtable/package.json b/packages/vtable/package.json
@@ -61,7 +61,7 @@
   },
   "devDependencies": {
     "luxon": "*",
-    "@visactor/vchart": "1.9.0",
+    "@visactor/vchart": "1.9.1",
     "@internal/bundler": "workspace:*",
     "@internal/eslint-config": "workspace:*",
     "@internal/ts-config": "workspace:*",
@@ -124,4 +124,4 @@
     "url": "https://github.com/VisActor/VTable.git",
     "directory": "packages/vtable"
   }
-}
+}
diff --git a/packages/vtable/src/components/axis/axis.ts b/packages/vtable/src/components/axis/axis.ts
@@ -57,13 +57,17 @@ export class CartesianAxis {
     );
 
     if (this.orient === 'left' || this.orient === 'right') {
+      const innerOffsetTop = this.option.innerOffset?.top ?? 0;
+      const innerOffsetBottom = this.option.innerOffset?.bottom ?? 0;
       this.width = width;
-      this.height = height - padding[2];
-      this.y = padding[0];
+      this.height = height - padding[2] - innerOffsetBottom;
+      this.y = padding[0] + innerOffsetTop;
     } else if (this.orient === 'top' || this.orient === 'bottom') {
-      this.width = width - padding[1];
+      const innerOffsetLeft = this.option.innerOffset?.left ?? 0;
+      const innerOffsetRight = this.option.innerOffset?.right ?? 0;
+      this.width = width - padding[1] - innerOffsetRight;
       this.height = height;
-      this.x = padding[3];
+      this.x = padding[3] + innerOffsetLeft;
     }
 
     this.visible = option.visible ?? true;