Skip to content

Commit

Permalink
fix: 修复 tickLine 位置不更新 (#1893)
Browse files Browse the repository at this point in the history
  • Loading branch information
@zengyue
zengyue authored Nov 24, 2023
1 parent 1ce5e60 commit d14d0bf
Show file tree
Hide file tree
Showing 8 changed files with 79 additions and 44 deletions.
21 changes: 11 additions & 10 deletions packages/f2/src/components/axis/rect/bottom.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ export default (props: RectProps<'bottom'>, context) => {
const { grid, tickLine, line, labelOffset, label, symbol } = style;
const filterTicks = ticks.filter((d) => !isNaN(d.value));
const symbols = isArray(symbol) ? symbol : [symbol];
const { length: tickLineLength, ...tickLineStyle } = tickLine || {};

return (
<group>
Expand All @@ -19,8 +20,8 @@ export default (props: RectProps<'bottom'>, context) => {
const end = points[points.length - 1];
return (
<line
key={tickValue}
attrs={{
key={`grid-${tickValue}`}
style={{
x1: start.x,
y1: start.y,
x2: end.x,
Expand All @@ -32,19 +33,19 @@ export default (props: RectProps<'bottom'>, context) => {
);
})
: null}
{tickLine && tickLine.length
{tickLineLength
? filterTicks.map((tick) => {
const { points, tickValue } = tick;
const start = points[0];
return (
<line
key={tickValue}
attrs={{
key={`tickLine-${tickValue}`}
style={{
x1: start.x,
y1: start.y,
x2: start.x,
y2: start.y + px2hd(tickLine.length),
...tickLine,
y2: start.y + px2hd(tickLineLength),
...tickLineStyle,
}}
/>
);
Expand All @@ -64,7 +65,7 @@ export default (props: RectProps<'bottom'>, context) => {
) : null}
{line ? (
<line
attrs={{
style={{
x1: left,
y1: bottom,
x2: right,
Expand Down Expand Up @@ -113,8 +114,8 @@ export default (props: RectProps<'bottom'>, context) => {

return (
<text
key={tickValue}
attrs={textAttrs}
key={`text-${tickValue}`}
style={textAttrs}
animation={
animation || {
appear: {
Expand Down
22 changes: 12 additions & 10 deletions packages/f2/src/components/axis/rect/left.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,14 @@ import { jsx } from '@antv/f-engine';
import { RectProps } from '../types';
import { isArray } from '@antv/util';

export default (props: RectProps) => {
export default (props: RectProps, context) => {
const { ticks: originTicks, coord, style, animation } = props;
const { px2hd } = context;
const { left, top, bottom } = coord;
const { grid, tickLine, line, labelOffset, label, symbol } = style;
const ticks = originTicks.filter((d) => !isNaN(d.value));
const symbols = isArray(symbol) ? symbol : [symbol];
const { length: tickLineLength, ...tickLineStyle } = tickLine || {};

return (
<group>
Expand All @@ -18,8 +20,8 @@ export default (props: RectProps) => {
const end = points[points.length - 1];
return (
<line
key={tickValue}
attrs={{
key={`grid-${tickValue}`}
style={{
x1: start.x,
y1: start.y,
x2: end.x,
Expand All @@ -31,19 +33,19 @@ export default (props: RectProps) => {
);
})
: null}
{tickLine && tickLine.length
{tickLineLength
? ticks.map((tick) => {
const { points, tickValue } = tick;
const start = points[0];
return (
<line
key={tickValue}
attrs={{
key={`tickLine-${tickValue}`}
style={{
x1: start.x,
y1: start.y,
x2: start.x - tickLine.length,
x2: start.x - px2hd(tickLineLength),
y2: start.y,
...tickLine,
...tickLineStyle,
}}
/>
);
Expand Down Expand Up @@ -88,8 +90,8 @@ export default (props: RectProps) => {
const start = points[0];
return (
<text
key={tickValue}
attrs={{
key={`text-${tickValue}`}
style={{
x: start.x - labelOffset,
y: start.y,
textAlign: 'right',
Expand Down
27 changes: 16 additions & 11 deletions packages/f2/src/components/axis/rect/right.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,26 @@ import { jsx } from '@antv/f-engine';
import { isArray } from '@antv/util';
import { RectProps } from '../types';

export default (props: RectProps) => {
export default (props: RectProps, context) => {
const { ticks: originTicks, coord, style } = props;
const { px2hd } = context;
const { top, right, bottom } = coord;
const { grid, tickLine, line, labelOffset, label, symbol } = style;
const ticks = originTicks.filter((d) => !isNaN(d.value));
const symbols = isArray(symbol) ? symbol : [symbol];
const { length: tickLineLength, ...tickLineStyle } = tickLine || {};

return (
<group>
{grid
? ticks.map((tick) => {
const { points, gridStyle } = tick;
const { points, tickValue, gridStyle } = tick;
const start = points[0];
const end = points[points.length - 1];
return (
<line
attrs={{
key={`grid-${tickValue}`}
style={{
x1: start.x,
y1: start.y,
x2: end.x,
Expand All @@ -30,18 +33,19 @@ export default (props: RectProps) => {
);
})
: null}
{tickLine && tickLine.length
{tickLineLength
? ticks.map((tick) => {
const { points } = tick;
const { points, tickValue } = tick;
const end = points[points.length - 1];
return (
<line
attrs={{
key={`tickLine-${tickValue}`}
style={{
x1: end.x,
y1: end.y,
x2: end.x + tickLine.length,
x2: end.x + px2hd(tickLineLength),
y2: end.y,
...tickLine,
...tickLineStyle,
}}
/>
);
Expand All @@ -59,7 +63,7 @@ export default (props: RectProps) => {
) : null}
{line ? (
<line
attrs={{
style={{
x1: right,
y1: top,
x2: right,
Expand All @@ -82,11 +86,12 @@ export default (props: RectProps) => {
) : null}
{label
? ticks.map((tick, _index) => {
const { points, text, labelStyle } = tick;
const { tickValue, points, text, labelStyle } = tick;
const end = points[points.length - 1];
return (
<text
attrs={{
key={`text-${tickValue}`}
style={{
x: end.x + labelOffset,
y: end.y,
textAlign: 'left',
Expand Down
25 changes: 15 additions & 10 deletions packages/f2/src/components/axis/rect/top.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,26 @@ import { isArray } from '@antv/util';
import { jsx } from '@antv/f-engine';
import { RectProps } from '../types';

export default (props: RectProps) => {
export default (props: RectProps, context) => {
const { ticks: originTicks, coord, style } = props;
const { px2hd } = context;
const { left, top, right } = coord;
const { grid, tickLine, line, labelOffset, label, symbol } = style;
const ticks = originTicks.filter((d) => !isNaN(d.value));
const symbols = isArray(symbol) ? symbol : [symbol];
const { length: tickLineLength, ...tickLineStyle } = tickLine || {};

return (
<group>
{grid
? ticks.map((tick) => {
const { points, gridStyle } = tick;
const { points, tickValue, gridStyle } = tick;
const start = points[0];
const end = points[points.length - 1];
return (
<line
attrs={{
key={`grid-${tickValue}`}
style={{
x1: start.x,
y1: start.y,
x2: end.x,
Expand All @@ -32,16 +35,17 @@ export default (props: RectProps) => {
: null}
{tickLine && tickLine.length
? ticks.map((tick) => {
const { points } = tick;
const { points, tickValue } = tick;
const end = points[points.length - 1];
return (
<line
attrs={{
key={`tickLine-${tickValue}`}
style={{
x1: end.x,
y1: end.y,
x2: end.x,
y2: end.y - tickLine.length,
...tickLine,
y2: end.y - px2hd(tickLineLength),
...tickLineStyle,
}}
/>
);
Expand All @@ -61,7 +65,7 @@ export default (props: RectProps) => {
) : null}
{line ? (
<line
attrs={{
style={{
x1: left,
y1: top,
x2: right,
Expand All @@ -84,11 +88,12 @@ export default (props: RectProps) => {
) : null}
{label
? ticks.map((tick, _index) => {
const { points, text, labelStyle } = tick;
const { tickValue, points, text, labelStyle } = tick;
const end = points[points.length - 1];
return (
<text
attrs={{
key={`text-${tickValue}`}
style={{
x: end.x,
y: end.y - labelOffset,
textAlign: 'center',
Expand Down
Binary file modified ...nents/candlestick/__image_snapshots__/pan-test-tsx-candlestick-swipe-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...nents/candlestick/__image_snapshots__/pan-test-tsx-candlestick-swipe-2-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...nents/candlestick/__image_snapshots__/pan-test-tsx-candlestick-swipe-3-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
28 changes: 25 additions & 3 deletions packages/f2/test/components/candlestick/pan.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -257,7 +257,18 @@ describe('candlestick', () => {
const { props } = (
<Canvas context={context} animate={false} pixelRatio={1}>
<Chart data={data}>
<Axis field="time" type="timeCat" tickCount={3} />
<Axis
field="time"
type="timeCat"
tickCount={3}
style={{
tickLine: {
length: 10,
lineWidth: '10px',
stroke: 'red',
},
}}
/>
<Axis field="value" />
<Candlestick x="time" y="value" />
<ScrollBar mode="x" range={[0.3, 0.6]} swipe={true} swipeDuration={100} autoFit={true} />
Expand All @@ -279,9 +290,20 @@ describe('candlestick', () => {
expect(context).toMatchImageSnapshot();

const { props: nextProps } = (
<Canvas context={context} animate={false} pixelRatio={1}>
<Canvas context={context} animate={false} pixelRatio={2}>
<Chart data={[].concat(data).slice(0, 30)}>
<Axis field="time" type="timeCat" tickCount={3} />
<Axis
field="time"
type="timeCat"
tickCount={3}
style={{
tickLine: {
length: 10,
lineWidth: '10px',
stroke: 'red',
},
}}
/>
<Axis field="value" />
<Candlestick x="time" y="value" />
<ScrollBar mode="x" range={[0.3, 0.8]} swipe={true} swipeDuration={100} autoFit={true} />
Expand Down

0 comments on commit d14d0bf

Please sign in to comment.