Merge pull request #268 from VisActor/feat/containerAlign-for-line-axis

Feat/containerAlign for line axis

common/changes/@visactor/vrender-components/feat-containerAlign-for-line-axis_2023-08-06-10-02.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender-components",
+      "comment": "feat: add `verticalMinSize` and `containerAlign` for line type axis, `verticalMinSize` is used to set the minumum vertical size of axis, and `containerAlign` is to set the all labels's alignment in axis container, support https://github.com/VisActor/VChart/issues/380",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@visactor/vrender-components"
+}

common/changes/@visactor/vrender-components/feat-containerAlign-for-line-axis_2023-08-07-14-20.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender-components",
+      "comment": "fix: the axis label's textAlign and textBaseline should auto adjust when angle is set, releate https://github.com/VisActor/VChart/issues/439",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@visactor/vrender-components"
+}

common/changes/@visactor/vrender-components/feat-containerAlign-for-line-axis_2023-08-07-15-45.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender-components",
+      "comment": "fix: panel only works for line axis",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@visactor/vrender-components"
+}

common/changes/@visactor/vrender-components/feat-containerAlign-for-line-axis_2023-08-08-15-25.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender-components",
+      "comment": "fix: line axis states should set default value",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@visactor/vrender-components"
+}

packages/vrender-components/__tests__/browser/examples/axis-interaction.ts

@@ -0,0 +1,161 @@
+import { LinearScale, PointScale } from '@visactor/vscale';
+import { GroupFadeIn, GroupFadeOut } from '@visactor/vrender';
+import { LineAxis, GroupTransition } from '../../../src';
+import render from '../../util/render';
+
+const axis = new LineAxis({
+  title: {
+    space: 20,
+    padding: 0,
+    textStyle: {
+      fontSize: 12,
+      fill: '#363839',
+      fontWeight: 'normal',
+      fillOpacity: 1,
+      textAlign: 'center',
+      textBaseline: 'bottom'
+    },
+    visible: false,
+    autoRotate: false,
+    angle: -1.5707963267948966,
+    shape: {},
+    background: {},
+    state: {
+      text: null,
+      shape: null,
+      background: null
+    },
+    text: '细分',
+    maxWidth: null
+  },
+  label: {
+    visible: true,
+    inside: false,
+    space: 20,
+    padding: 0,
+    style: {
+      fontSize: 12,
+      fill: '#6F6F6F',
+      fontWeight: 'normal',
+      fillOpacity: 1,
+      angle: 0,
+      textAlign: 'center'
+    },
+    formatMethod: null,
+    state: null,
+    autoRotate: false,
+    autoHide: false,
+    autoLimit: false,
+    containerAlign: 'center'
+  },
+  tick: {
+    visible: false,
+    inside: false,
+    alignWithLabel: true,
+    length: 4,
+    style: {
+      lineWidth: 1,
+      stroke: '#D9DDE4',
+      strokeOpacity: 1
+    },
+    state: null
+  },
+  subTick: {
+    visible: false,
+    inside: false,
+    count: 4,
+    length: 2,
+    style: {
+      lineWidth: 1,
+      stroke: '#D9DDE4',
+      strokeOpacity: 1
+    },
+    state: null
+  },
+  line: {
+    visible: true,
+    style: {
+      lineWidth: 1,
+      stroke: '#989999',
+      strokeOpacity: 1
+    },
+    startSymbol: {},
+    endSymbol: {}
+  },
+  grid: {
+    style: {
+      lineWidth: 1,
+      stroke: '#DADCDD',
+      strokeOpacity: 1,
+      lineDash: [4, 2]
+    },
+    visible: false,
+    length: 461,
+    type: 'line',
+    depth: 0
+  },
+  subGrid: {
+    visible: false,
+    style: {
+      lineWidth: 1,
+      stroke: '#EBEDF2',
+      strokeOpacity: 1,
+      lineDash: [4, 4]
+    },
+    type: 'line'
+  },
+  x: 397,
+  y: 12,
+  start: {
+    x: 0,
+    y: 0
+  },
+  end: {
+    x: 0,
+    y: 327
+  },
+  items: [
+    [
+      {
+        id: '消费者',
+        label: '消费者',
+        value: 0.8333333333333334,
+        rawValue: '消费者'
+      },
+      {
+        id: '公司',
+        label: '公司',
+        value: 0.4999999999999999,
+        rawValue: '公司'
+      },
+      {
+        id: '小型企业',
+        label: '小型企业',
+        value: 0.1666666666666666,
+        rawValue: '小型企业'
+      }
+    ]
+  ],
+  visible: true,
+  pickable: true,
+  orient: 'left',
+  hover: true,
+  panel: {
+    visible: true,
+    state: {
+      hover: {
+        fillOpacity: 0.08,
+        fill: '#141414'
+      },
+      hover_reverse: {
+        fillOpacity: 0.08,
+        fill: '#141414'
+      }
+    }
+  },
+  verticalFactor: 1,
+  verticalLimitSize: 150,
+  verticalMinSize: 150
+});
+
+render([axis], 'main');

packages/vrender-components/__tests__/browser/examples/cartesian-axis-label-align.ts

@@ -0,0 +1,165 @@
+import { AABBBounds } from '@visactor/vutils';
+import { PointScale } from '@visactor/vscale';
+import { LineAxis } from '../../../src';
+import { alignAxisLabels } from '../../../src/util/align';
+import render from '../../util/render';
+
+const domain = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
+const pointScale = new PointScale().domain(domain).range([0, 1]);
+const xItems = domain.map(value => {
+  return {
+    id: value,
+    label: value,
+    value: pointScale.scale(value),
+    rawValue: value
+  };
+});
+const axisBottom = new LineAxis({
+  start: { x: 150, y: 350 },
+  end: { x: 350, y: 350 },
+  items: [xItems],
+  title: {
+    visible: true,
+    position: 'middle',
+    autoRotate: true,
+    padding: 4,
+    maxWidth: 100,
+    text: 'x 轴 -- bottom',
+    space: 0
+  },
+  tick: {
+    visible: true,
+    length: 10
+  },
+  label: {
+    visible: true,
+    space: 10,
+    autoRotate: true,
+    autoRotateAngle: [-45],
+    autoHide: true,
+    autoLimit: true,
+    containerAlign: 'bottom'
+  },
+  orient: 'bottom',
+  verticalLimitSize: 120,
+  verticalMinSize: 120
+});
+
+const axisTop = new LineAxis({
+  start: { x: 150, y: 150 },
+  end: { x: 350, y: 150 },
+  items: [xItems],
+  title: {
+    visible: true,
+    position: 'middle',
+    autoRotate: true,
+    padding: 4,
+    maxWidth: 100,
+    text: 'x 轴 -- bottom',
+    space: 0
+  },
+  tick: {
+    visible: true,
+    length: 10
+  },
+  label: {
+    visible: true,
+    space: 10,
+    autoRotate: false,
+    autoRotateAngle: [45],
+    autoHide: true,
+    autoLimit: true,
+    containerAlign: 'bottom'
+    // formatMethod: () => 'AAAAAAAAAAAAAA',
+  },
+  orient: 'top',
+  verticalLimitSize: 100,
+  verticalMinSize: 100,
+  verticalFactor: -1
+});
+
+const axisLeft = new LineAxis({
+  start: { x: 150, y: 150 },
+  end: { x: 150, y: 350 },
+  items: [xItems],
+  title: {
+    visible: true,
+    position: 'middle',
+    autoRotate: true,
+    padding: 4,
+    maxWidth: 100,
+    text: 'y 轴 -- left',
+    space: 0
+  },
+  tick: {
+    visible: true,
+    length: 10
+  },
+  label: {
+    visible: true,
+    autoRotate: false,
+    autoRotateAngle: [0, 45, 90],
+    autoHide: true,
+    autoLimit: true,
+    containerAlign: 'right',
+    space: 20
+    // formatMethod: () => 'AAAAAAAAAAAAAA'
+  },
+  orient: 'left',
+  verticalLimitSize: 300,
+  verticalMinSize: 150,
+  panel: {
+    visible: true,
+    style: {
+      stroke: 'red'
+    }
+  }
+});
+
+const axisRight = new LineAxis({
+  start: { x: 350, y: 150 },
+  end: { x: 350, y: 350 },
+  items: [xItems],
+  title: {
+    visible: true,
+    position: 'middle',
+    autoRotate: true,
+    padding: 10,
+    maxWidth: 100,
+    text: 'y 轴 -- Right',
+    space: 0
+  },
+  tick: {
+    visible: true,
+    length: 10
+  },
+  label: {
+    visible: true,
+    autoRotate: false,
+    autoRotateAngle: [0, 45, 90],
+    autoHide: true,
+    autoLimit: true,
+    containerAlign: 'left',
+    formatMethod: (value, datum, index, data) => {
+      if (value === 'Y') {
+        return 'AAAAAAAAAAAAAA';
+      }
+      return value;
+    },
+    space: 20
+  },
+  orient: 'right',
+  verticalLimitSize: 140,
+  // verticalMinSize: 100,
+  verticalFactor: -1,
+  panel: {
+    visible: true,
+    style: {
+      stroke: 'red'
+    }
+  }
+});
+
+render([axisRight, axisLeft, axisBottom, axisTop], 'main');
+
+console.log(axisRight.getElementsByName('axis-container')[0].AABBBounds.width());

packages/vrender-components/__tests__/browser/main.ts

@@ -2,6 +2,14 @@ import './style.css';
 
 const LOCAL_STORAGE_KEY = 'VRENDER_COMPONENTS_DEMOS';
 const specs = [
+  {
+    path: 'axis-interaction',
+    name: '轴交互'
+  },
+  {
+    path: 'cartesian-axis-label-align',
+    name: '轴标签整体对齐'
+  },
   {
     path: 'axis-overlap',
     name: '轴标签防重叠'
@@ -223,7 +231,8 @@ const handleClick = (e: { target: any }, isInit?: boolean) => {
         module.run?.();
       })
       .catch(err => {
-        // console.log(err);
+        // eslint-disable-next-line no-console
+        console.log(err);
       });
   }
 };