diff --git a/__tests__/integration/snapshots/static/settleWeatherCellLineXY.png b/__tests__/integration/snapshots/static/settleWeatherCellLineXY.png new file mode 100644 index 0000000000..21dffa8681 Binary files /dev/null and b/__tests__/integration/snapshots/static/settleWeatherCellLineXY.png differ diff --git a/__tests__/plots/static/index.ts b/__tests__/plots/static/index.ts index e649b8b175..2147b44188 100644 --- a/__tests__/plots/static/index.ts +++ b/__tests__/plots/static/index.ts @@ -275,3 +275,4 @@ export { cars2PointOrdinalSize } from './cars2-point-ordinal-size'; export { cars2PointConstantColorSize } from './cars2-point-constant-color-size'; export { alphabetIntervalTitleAuto } from './alphabet-interval-title-auto'; export { alphabetIntervalAutoPaddingLabelHide } from './alphabet-interval-auto-padding-label-hide'; +export { settleWeatherCellLineXY } from './seattle-weather-cell-lineXY'; diff --git a/__tests__/plots/static/seattle-weather-cell-lineXY.ts b/__tests__/plots/static/seattle-weather-cell-lineXY.ts new file mode 100644 index 0000000000..36314b0d7c --- /dev/null +++ b/__tests__/plots/static/seattle-weather-cell-lineXY.ts @@ -0,0 +1,34 @@ +import { G2Spec } from '../../../src'; + +export function settleWeatherCellLineXY(): G2Spec { + return { + type: 'view', + height: 325, + children: [ + { + type: 'cell', + data: { + type: 'fetch', + value: 'data/seattle-weather.csv', + }, + encode: { + x: (d) => new Date(d.date).getUTCDate(), + y: (d) => new Date(d.date).getUTCMonth(), + color: 'temp_max', + }, + transform: [{ type: 'group', color: 'max' }], + style: { inset: 0.5 }, + }, + { + type: 'lineY', + data: [4], + style: { stroke: 'red', strokeWidth: 4, bandOffset: 0.5 }, + }, + { + type: 'lineX', + data: [4], + style: { stroke: 'red', strokeWidth: 4, bandOffset: 0.5 }, + }, + ], + }; +} diff --git a/src/mark/lineX.ts b/src/mark/lineX.ts index f2fafb4e87..03fd7f7819 100644 --- a/src/mark/lineX.ts +++ b/src/mark/lineX.ts @@ -1,21 +1,27 @@ -import { Vector } from '@antv/coord'; +import { deepMix } from '@antv/util'; import { MarkComponent as MC, Vector2 } from '../runtime'; import { LineXMark } from '../spec'; import { basePostInference, baseAnnotationChannels, basePreInference, + createBandOffset, } from './utils'; export type LineXOptions = Omit; -export const LineX: MC = () => { +export const LineX: MC = (options) => { return (index, scale, value, coordinate) => { const { x: X } = value; + const offset = createBandOffset( + scale, + value, + deepMix({ style: { bandOffset: 0 } }, options), + ); const P = Array.from(index, (i) => { - const p1 = [X[i], 1] as Vector; - const p2 = [X[i], 0] as Vector; - return [p1, p2].map((d) => coordinate.map(d)) as Vector2[]; + const p1 = [X[i], 1] as Vector2; + const p2 = [X[i], 0] as Vector2; + return [p1, p2].map((d) => coordinate.map(offset(d, i))) as Vector2[]; }); return [index, P]; }; diff --git a/src/mark/lineY.ts b/src/mark/lineY.ts index 06f6dda8a7..2378ebb65c 100644 --- a/src/mark/lineY.ts +++ b/src/mark/lineY.ts @@ -1,21 +1,27 @@ -import { Vector } from '@antv/coord'; +import { deepMix } from '@antv/util'; import { MarkComponent as MC, Vector2 } from '../runtime'; import { LineYMark } from '../spec'; import { baseAnnotationChannels, basePreInference, basePostInference, + createBandOffset, } from './utils'; export type LineYOptions = Omit; -export const LineY: MC = () => { +export const LineY: MC = (options) => { return (index, scale, value, coordinate) => { const { y: Y } = value; + const offset = createBandOffset( + scale, + value, + deepMix({ style: { bandOffset: 0 } }, options), + ); const P = Array.from(index, (i) => { - const p1 = [0, Y[i]] as Vector; - const p2 = [1, Y[i]] as Vector; - return [p1, p2].map((d) => coordinate.map(d)) as Vector2[]; + const p1 = [0, Y[i]] as Vector2; + const p2 = [1, Y[i]] as Vector2; + return [p1, p2].map((d) => coordinate.map(offset(d, i))) as Vector2[]; }); return [index, P]; };