diff --git a/__tests__/integration/snapshots/animation/population-interval-rose-keyframe/interval2-0.png b/__tests__/integration/snapshots/animation/population-interval-rose-keyframe/interval2-0.png index fdb5feadd1..dd6ba7d8f0 100644 Binary files a/__tests__/integration/snapshots/animation/population-interval-rose-keyframe/interval2-0.png and b/__tests__/integration/snapshots/animation/population-interval-rose-keyframe/interval2-0.png differ diff --git a/__tests__/integration/snapshots/animation/population-interval-rose-keyframe/interval2-1.png b/__tests__/integration/snapshots/animation/population-interval-rose-keyframe/interval2-1.png index eed1320583..bbb805a980 100644 Binary files a/__tests__/integration/snapshots/animation/population-interval-rose-keyframe/interval2-1.png and b/__tests__/integration/snapshots/animation/population-interval-rose-keyframe/interval2-1.png differ diff --git a/__tests__/plots/animation/population-interval-rose-keyframe.ts b/__tests__/plots/animation/population-interval-rose-keyframe.ts index b897498a37..87687c6529 100644 --- a/__tests__/plots/animation/population-interval-rose-keyframe.ts +++ b/__tests__/plots/animation/population-interval-rose-keyframe.ts @@ -58,3 +58,4 @@ export async function populationIntervalRoseKeyframe(): Promise { } populationIntervalRoseKeyframe.intervals = [false, false, [333, 666]]; +populationIntervalRoseKeyframe.maxError = 100; diff --git a/__tests__/plots/interaction/appl-line-slider-filter-transpose.ts b/__tests__/plots/interaction/appl-line-slider-filter-transpose.ts index a5ae34f1ee..4f1244fef7 100644 --- a/__tests__/plots/interaction/appl-line-slider-filter-transpose.ts +++ b/__tests__/plots/interaction/appl-line-slider-filter-transpose.ts @@ -29,6 +29,8 @@ export function aaplLineSliderFilterTranspose(): G2Spec { aaplLineSliderFilterTranspose.maxError = 500; +aaplLineSliderFilterTranspose.skip = true; + aaplLineSliderFilterTranspose.steps = ({ canvas }) => { const { document } = canvas; const sliders = document.getElementsByClassName(SLIDER_CLASS_NAME); diff --git a/package.json b/package.json index 88c6afa038..bf5f786ded 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,7 @@ "@antv/g": "^5.7.4", "@antv/g-canvas": "^1.7.4", "@antv/g-plugin-dragndrop": "^1.6.1", - "@antv/gui": "0.5.0-alpha.17", + "@antv/gui": "^0.5.0-alpha.18", "@antv/path-util": "^3.0.1", "@antv/scale": "^0.4.7", "@antv/util": "^3.3.2", diff --git a/site/docs/spec/component/axis.zh.md b/site/docs/spec/component/axis.zh.md index 4dbb13beb0..61819a29c0 100644 --- a/site/docs/spec/component/axis.zh.md +++ b/site/docs/spec/component/axis.zh.md @@ -53,16 +53,16 @@ chart.render(); ### 标题 -| 属性 | 描述 | 类型 | 默认值 | -| -------------------------- | -------------------------------------------------------------- | ------------------------------------------------ | ------ | +| 属性 | 描述 | 类型 | 默认值 | +| -------------------------- | -------------------------------------------------------------- | ------------------------------------------------------------ | ------ | | title | 关闭标题或设置标题内容 | `false`|`string` | `number` | `DisplayObject` | - | -| `style.`titleSpacing | 标题到坐标轴的距离 | `number` | 10 | +| `style.`titleSpacing | 标题到坐标轴的距离 | `number` | 10 | | `style.`titlePosition | 标题相对坐标轴的位置，支持首字母简写形式，如`'top'`简写为`'t'` | `'top'`|`'bottom'`|`'left'`|`'right'` | `'lb'` | -| `style.`titleFontSize | 标题文字大小 | `number` | - | -| `style.`titleFontFamily | 标题文字字体 | `string` | - | -| `style.`titleFontWeight | 标题字体粗细 | `number` | - | -| `style.`titleStroke | 标题字体颜色 | `string` | - | -| `style.`titleStrokeOpacity | 标题透明度 | `number` | - | +| `style.`titleFontSize | 标题文字大小 | `number` | - | +| `style.`titleFontFamily | 标题文字字体 | `string` | - | +| `style.`titleFontWeight | 标题字体粗细 | `number` | - | +| `style.`titleStroke | 标题字体颜色 | `string` | - | +| `style.`titleStrokeOpacity | 标题透明度 | `number` | - | ### 轴线 @@ -81,10 +81,10 @@ chart.render(); ### 刻度 -| 属性 | 描述 | 类型 | 默认值 | -| ------------------------- | ------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- | ---------- | -| tick | 是否显示刻度 | `boolean` | true | -| tickFilter | 刻度线过滤 | `(datum, index, data)=>boolean` | - | +| 属性 | 描述 | 类型 | 默认值 | +| ------------------------- | ------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | ---------- | +| tick | 是否显示刻度 | `boolean` | true | +| tickFilter | 刻度线过滤 | `(datum, index, data)=>boolean` | - | | tickFormatter | 刻度线格式化，可用于自定义刻度样式，回调函数中会额外返回该刻度的方向 | `DisplayObject` | `(datum, index, data, Vector)=> DisplayObject` | - | | `style.`tickDirection | 刻度朝向，为 `positive` 时，位于侧轴方向（即主轴顺时针 90 度方向）, 为 `negative` 时，刻度位于侧轴负方向 | `'positive'` | `'negative'` | 'positive' | | `style.`tickLength | 轴线长度 | `number`|`(datum, index, data)=>number` | 15 | @@ -95,18 +95,19 @@ chart.render(); ### 刻度值 -| 属性 | 描述 | 类型 | 默认值 | -| -------------------------- | ------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | ---------- | -| label | 是否显示刻度值 | `boolean` | - | -| labelFilter | 刻度值过滤 | `(datum, index, data)=> boolean` | - | +| 属性 | 描述 | 类型 | 默认值 | +| -------------------------- | ------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | ---------- | +| label | 是否显示刻度值 | `boolean` | - | +| labelFilter | 刻度值过滤 | `(datum, index, data)=> boolean` | - | | labelFormatter | 刻度值线格式化 | `DisplayObject` | `(datum, index, data, Vector)=> DisplayObject` | - | -| transform | 刻度值转换，避免文本之间发生重叠。当前支持超长文本缩略、重叠刻度值隐藏、自动旋转 | `boolean` | - | +| transform | 刻度值转换，避免文本之间发生重叠。当前支持超长文本缩略、重叠刻度值隐藏、自动旋转 | `boolean` | - | | labelAutoHide | 自动隐藏重叠的刻度值 | `number` | `(datum, index, data)=>number` | - | -| labelAutoRotate | 自动旋转刻度值 | `boolean` | - | -| labelAutoEllipsis | 自动缩略刻度值 | `boolean` | - | -| `style.`labelAlign | 刻度值对齐方式
- 'horizontal' 始终保持水平
- 'parallel' 平行于坐标轴
- 'perpendicular' 垂直于坐标轴 | `'horizontal'` | `'parallel'` | `'perpendicular'` | 'parallel' | +| labelAutoRotate | 自动旋转刻度值 | `boolean` | - | +| labelAutoEllipsis | 自动缩略刻度值 | `boolean` | - | +| labelAutoWrap | 自动换行刻度值 | `boolean` | - | +| `style.`labelAlign | 刻度值对齐方式
- 'horizontal' 始终保持水平
- 'parallel' 平行于坐标轴
- 'perpendicular' 垂直于坐标轴 | `'horizontal'` | `'parallel'` | `'perpendicular'` | 'parallel' | | `style.`labelDirection | 刻度值位于轴线的位置，参考`tickDirection` | `'positive'` | `'negative'` | 'positive' | -| `style.`labelSpacing | 刻度值到其对应刻度的间距 | `number` | 0 | +| `style.`labelSpacing | 刻度值到其对应刻度的间距 | `number` | 0 | | `style.`labelLineWidth | 刻度值宽度 | `number` |`(datum, index, data)=>number` | - | | `style.`labelLineDash | 刻度值描边的虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为[0, 0]的效果为没有描边。 | `[number,number]` | `(datum, index, data)=>[number, number]` | - | | `style.`labelFontSize | 刻度值文字大小 | `number` | `(datum, index, data)=>number` | - | @@ -145,6 +146,14 @@ export interface HideOverlapCfg extends Transform { /** 保证最后一个刻度值不被隐藏 */ keepTail?: boolean; } +export interface WrapOverlapCfg extends Transform { + type: 'wrap'; + /** 单行最大宽度 */ + wordWrapWidth?: number; + /** 最大行数 */ + maxLines?: number; + recoverWhenFailed?: boolean; +} ``` ### 网格线 @@ -158,23 +167,23 @@ export interface HideOverlapCfg extends Transform { | `极坐标系` | polar-grid | | `极坐标系` `雷达图` | polygon-grid | -| 属性 | 描述 | 类型 | 默认值 | -| ------------------------- | ------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ------ | -| grid | 是否显示网格线 | `boolean` | false | -| gridFilter | 网格线过滤 | `(datum, index, data)=> boolean` | - | -| `style.`gridLength | 网格线长度。一般情况下，不需要用户配置。 | `number` | `(datum, index, data)=> number` | 0 | +| 属性 | 描述 | 类型 | 默认值 | +| ------------------------- | ------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ------ | +| grid | 是否显示网格线 | `boolean` | false | +| gridFilter | 网格线过滤 | `(datum, index, data)=> boolean` | - | +| `style.`gridLength | 网格线长度。一般情况下，不需要用户配置。 | `number` | `(datum, index, data)=> number` | 0 | | `style.`gridAreaFill | 网格线区域颜色 | `string` | `string[]`| `(datum, index, data)=> string` | - | -| `style.`gridLineWidth | 网格线宽度 | `number` | - | -| `style.`gridLineDash | 网格线描边的虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为[0, 0]的效果为没有描边。 | `[number,number]` | - | -| `style.`gridStroke | 网格线颜色 | `string` | - | -| `style.`gridStrokeOpacity | 网格线透明度 | `number` | - | +| `style.`gridLineWidth | 网格线宽度 | `number` | - | +| `style.`gridLineDash | 网格线描边的虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为[0, 0]的效果为没有描边。 | `[number,number]` | - | +| `style.`gridStroke | 网格线颜色 | `string` | - | +| `style.`gridStrokeOpacity | 网格线透明度 | `number` | - | ### 动画 支持设置更新时的动画效果 -| 属性 | 描述 | 类型 | 默认值 | -| ------- | ------------ | --------------------------- | ------ | +| 属性 | 描述 | 类型 | 默认值 | +| ------- | ------------ | ------------------------------- | ------ | | animate | 是否开启动画 | `boolean` | `EffectTiming` | - | EffectTiming 支持配置的属性如下： diff --git a/src/component/axis.ts b/src/component/axis.ts index 437ed1010f..3b6ca9a097 100644 --- a/src/component/axis.ts +++ b/src/component/axis.ts @@ -193,34 +193,31 @@ function inferGridLength(position: GCP, coordinate: Coordinate) { } function inferLabelOverlap(transform = [], style: Record) { - const { - labelAutoRotate = true, - labelAutoHide = false, - labelAutoEllipsis = false, - } = style; + if (transform.length > 0) return transform; + const { labelAutoRotate, labelAutoHide, labelAutoEllipsis, labelAutoWrap } = + style; - const finalTransforms = [...transform]; + const finalTransforms = []; - const mutateLabelOverlap = (overlap, state) => { + const addToTransfroms = (overlap, state) => { if (state) { - const index = finalTransforms.findIndex((t) => t.type === overlap.type); - if (index !== -1) finalTransforms[index] = overlap; - else finalTransforms.push(overlap); - } else { - const index = finalTransforms.findIndex((t) => t.type === overlap.type); - if (index !== -1) finalTransforms.splice(index, 1); + finalTransforms.push(overlap); } }; - mutateLabelOverlap( + addToTransfroms( { type: 'rotate', optionalAngles: [0, 15, 30, 45, 60, 90], }, labelAutoRotate, ); - mutateLabelOverlap({ type: 'ellipsis', minLength: 20 }, labelAutoEllipsis); - mutateLabelOverlap({ type: 'hide' }, labelAutoHide); + addToTransfroms({ type: 'ellipsis', minLength: 20 }, labelAutoEllipsis); + addToTransfroms({ type: 'hide' }, labelAutoHide); + addToTransfroms( + { type: 'wrap', wordWrapWidth: 100, maxLines: 3, recoveryWhenFail: true }, + labelAutoWrap, + ); return finalTransforms; } @@ -503,7 +500,6 @@ const LinearAxisComponent: GCC = (options) => { }; const gridLength = inferGridLength(position, coordinate); - const overrideStyle = inferAxisLinearOverrideStyle( position, orientation, @@ -523,6 +519,7 @@ const LinearAxisComponent: GCC = (options) => { position, coordinate, ), + crossSize: size, titleText: titleContent(title), labelOverlap: inferLabelOverlap(transform, internalAxisStyle), grid: inferGrid(internalAxisStyle.grid, coordinate, scale), diff --git a/src/component/axisX.ts b/src/component/axisX.ts index c9c0f3af76..9ae981aef2 100644 --- a/src/component/axisX.ts +++ b/src/component/axisX.ts @@ -7,7 +7,9 @@ export type AxisXOptions = AxisOptions; * LinearAxis component bind to x scale. */ export const AxisX: GCC = (options) => { - return LinearAxis(options); + return (...args) => + // empirical value for crossPadding + LinearAxis(Object.assign({}, { crossPadding: 50 }, options))(...args); }; AxisX.props = { diff --git a/src/component/axisY.ts b/src/component/axisY.ts index 1810e14394..eae555c6af 100644 --- a/src/component/axisY.ts +++ b/src/component/axisY.ts @@ -7,7 +7,8 @@ export type AxisYOptions = AxisOptions; * LinearAxis component bind to y scale. */ export const AxisY: GCC = (options) => { - return LinearAxis(options); + return (...args) => + LinearAxis(Object.assign({}, { crossPadding: 10 }, options))(...args); }; AxisY.props = { diff --git a/src/theme/classic.ts b/src/theme/classic.ts index 5f0806298c..386f8c2f65 100644 --- a/src/theme/classic.ts +++ b/src/theme/classic.ts @@ -259,6 +259,7 @@ export const Classic: TC = (options) => { gridDirection: 'negative', labelDirection: 'positive', labelSpacing: 12, + labelAutoRotate: true, tickDirection: 'positive', titlePosition: 'bottom', titleSpacing: 10, @@ -280,6 +281,7 @@ export const Classic: TC = (options) => { gridDirection: 'positive', labelDirection: 'negative', labelSpacing: 4, + labelAutoRotate: false, tickDirection: 'negative', titlePosition: 'right', titleSpacing: 0,