Skip to content

Commit

Permalink
fix(interval): fix interval render funnel (#4868)
Browse files Browse the repository at this point in the history
  • Loading branch information
shield2018 committed Apr 10, 2023
1 parent 3c7a060 commit 41cc3b0
Showing 6 changed files with 100 additions and 11 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
38 changes: 38 additions & 0 deletions __tests__/plots/static/alphabet-interval-funnel.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { G2Spec } from '../../../src';

export function alphabetIntervalFunnel(): G2Spec {
return {
type: 'interval',
coordinate: {
transform: [{ type: 'transpose' }],
},
data: [
{ text: '页面', value: 1000 },
{ text: '页面1', value: 900 },
{ text: '页面2', value: 800 },
{ text: '页面3', value: 700 },
],
transform: [
{
type: 'symmetryY',
},
],
axis: {
x: false,
y: false,
},
style: {
stroke: '#ff0000',
},
encode: {
x: 'text',
y: 'value',
color: 'text',
shape: 'funnel',
},
scale: {
x: { paddingOuter: 0, paddingInner: 0 },
color: { type: 'ordinal', range: ['red', 'green', 'blue', '#e45ca2'] },
},
};
}
38 changes: 38 additions & 0 deletions __tests__/plots/static/alphabet-interval-pyramid.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { G2Spec } from '../../../src';

export function alphabetIntervalPyramid(): G2Spec {
return {
type: 'interval',
coordinate: {
transform: [{ type: 'transpose' }],
},
data: [
{ text: '页面', value: 1000 },
{ text: '页面1', value: 900 },
{ text: '页面2', value: 800 },
{ text: '页面3', value: 700 },
],
transform: [
{
type: 'symmetryY',
},
],
axis: {
x: false,
y: false,
},
style: {
stroke: '#ff0000',
},
encode: {
x: 'text',
y: 'value',
color: 'text',
shape: 'pyramid',
},
scale: {
x: { paddingOuter: 0, paddingInner: 0 },
color: { type: 'ordinal', range: ['red', 'green', 'blue', '#e45ca2'] },
},
};
}
2 changes: 2 additions & 0 deletions __tests__/plots/static/index.ts
Original file line number Diff line number Diff line change
@@ -3,6 +3,8 @@ export { alphabetIntervalTitle } from './alphabet-interval-title';
export { alphabetIntervalLabelOverflowHide } from './alphabet-interval-label-overflow-hide';
export { alphabetIntervalLabelContrastReverse } from './alphabet-interval-label-contrast-reverse';
export { alphabetIntervalDataSort } from './alphabet-interval-data-sort';
export { alphabetIntervalFunnel } from './alphabet-interval-funnel';
export { alphabetIntervalPyramid } from './alphabet-interval-pyramid';
export { gammaRandomLineSortXQuantitative } from './gamma-random-line-sortx-quantitative';
export { alphabetIntervalTransposed } from './alphabet-interval-transposed';
export { stateAgesIntervalStacked } from './stateages-interval-stacked';
33 changes: 22 additions & 11 deletions src/shape/interval/funnel.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import { Path } from '@antv/g';
import { line, curveLinearClosed } from 'd3-shape';
import { Coordinate } from '@antv/coord';
import { isTranspose } from '../../utils/coordinate';
import { ShapeComponent as SC, Vector2 } from '../../runtime';
import { Color } from './color';
import { select } from '../../utils/selection';
import { applyStyle, getShapeTheme, reorder, toOpacityKey } from '../utils';

export type FunnelOptions = {
adjustPoints?: (
@@ -38,22 +41,30 @@ function getFunnelPoints(
export const Funnel: SC<FunnelOptions> = (options) => {
const { adjustPoints = getFunnelPoints, ...style } = options;
return (points, value, coordinate, theme, point2d, ...args) => {
const { index } = value;
const { index, mark, shape, defaultShape } = value;
const { defaultColor, ...defaults } = getShapeTheme(
theme,
mark,
shape,
defaultShape,
);
const nextPoints = point2d[index + 1];
const funnelPoints = adjustPoints(points, nextPoints, coordinate);
const tpShape = !!isTranspose(coordinate);

return Color({ colorAttribute: 'fill', ...style })(
funnelPoints,
value,
coordinate,
theme,
point2d,
...args,
);
const [p0, p1, p2, p3] = tpShape ? reorder(funnelPoints) : funnelPoints;
const { color = defaultColor, opacity } = value;
const b = line().curve(curveLinearClosed)([p0, p1, p2, p3]);
return select(new Path({}))
.call(applyStyle, defaults)
.style('path', b)
.style('fill', color)
.style('fillOpacity', opacity)
.call(applyStyle, style)
.node();
};
};

Funnel.props = {
...Color.props,
defaultMarker: 'funnel',
};

0 comments on commit 41cc3b0

Please sign in to comment.