From 2e84a266bbb333fccc44ee1704066a723547c5bd Mon Sep 17 00:00:00 2001 From: zengyue ye Date: Wed, 21 Feb 2024 20:30:01 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20scroll=20bar=20=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=8F=AF=E9=85=8D=E7=BD=AE=20(#1900)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/scrollBar/horizontal.tsx | 6 ++++- .../f2/src/components/scrollBar/vertical.tsx | 5 +++- .../components/scrollBar/withScrollBar.tsx | 16 +++++++++++- ...dge-pan-test-tsx-dodge-pan-init-1-snap.png | Bin 9673 -> 9630 bytes ...odge-pan-test-tsx-dodge-pan-pan-1-snap.png | Bin 9544 -> 9525 bytes .../components/interaction/dodge-pan.test.tsx | 17 ++++++++++++- site/docs/api/chart/scroll-bar.zh.md | 23 +++++++++++++++--- 7 files changed, 60 insertions(+), 7 deletions(-) diff --git a/packages/f2/src/components/scrollBar/horizontal.tsx b/packages/f2/src/components/scrollBar/horizontal.tsx index 0b929000c..c2e5d68b0 100644 --- a/packages/f2/src/components/scrollBar/horizontal.tsx +++ b/packages/f2/src/components/scrollBar/horizontal.tsx @@ -1,19 +1,21 @@ import { jsx } from '@antv/f-engine'; export default (props, context) => { - const { coord, range, position, layout } = props; + const { coord, range, position, layout, style, background, barStyle } = props; const { left, width } = coord; const { top, height } = layout; const [start, end] = range?.x || range?.y; const barLeft = width * start; const barWidth = width * (end - start); if (isNaN(barWidth)) return; + return ( { stroke: 'rgba(202, 215, 239, .2)', lineCap: 'round', lineWidth: '8px', + ...background, }} /> { stroke: 'rgba(202, 215, 239, .5)', lineCap: 'round', lineWidth: '8px', + ...barStyle, }} /> diff --git a/packages/f2/src/components/scrollBar/vertical.tsx b/packages/f2/src/components/scrollBar/vertical.tsx index daab051e6..42d78053f 100644 --- a/packages/f2/src/components/scrollBar/vertical.tsx +++ b/packages/f2/src/components/scrollBar/vertical.tsx @@ -1,7 +1,7 @@ import { jsx } from '@antv/f-engine'; export default (props, context) => { - const { coord, range, position, layout } = props; + const { coord, range, position, layout, style, background, barStyle } = props; const { top, height } = coord; const { left, width } = layout; const [start, end] = range?.y || range?.x; @@ -15,6 +15,7 @@ export default (props, context) => { display: 'flex', top, left: position === 'left' ? left - context.px2hd('8px') : left + width, + ...style, }} > { stroke: 'rgba(202, 215, 239, .2)', lineCap: 'round', lineWidth: '8px', + ...background, }} /> { stroke: 'rgba(202, 215, 239, .5)', lineCap: 'round', lineWidth: '8px', + ...barStyle, }} /> diff --git a/packages/f2/src/components/scrollBar/withScrollBar.tsx b/packages/f2/src/components/scrollBar/withScrollBar.tsx index 1c99ff6e4..f3be2d5b6 100644 --- a/packages/f2/src/components/scrollBar/withScrollBar.tsx +++ b/packages/f2/src/components/scrollBar/withScrollBar.tsx @@ -1,4 +1,4 @@ -import { jsx } from '@antv/f-engine'; +import { jsx, ShapeProps } from '@antv/f-engine'; import withZoom, { ZoomProps } from '../zoom'; import { ChartChildProps } from '../../chart'; @@ -13,8 +13,22 @@ export interface ScrollBarProps extends ZoomProps { position?: 'bottom' | 'top' | 'left' | 'right'; /** * 间距 + * @deprecated */ margin?: string; + + /** + * 滚动条父容器样式 + */ + style?: ShapeProps; + /** + * 背景条样式 + */ + background?: ShapeProps; + /** + * 滚动条样式 + */ + barStyle?: ShapeProps; } export default (View) => { diff --git a/packages/f2/test/components/interaction/__image_snapshots__/dodge-pan-test-tsx-dodge-pan-init-1-snap.png b/packages/f2/test/components/interaction/__image_snapshots__/dodge-pan-test-tsx-dodge-pan-init-1-snap.png index f18d7ce13cc1f24c087d72d491f86bb41c09eb65..be17c7482442c0ff2511f3f152fa9da8775513d1 100644 GIT binary patch literal 9630 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 Fe*-I0Fi8La literal 9673 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 U84D9|MGG=BvNEi?aO3WO0j}~y#sB~S diff --git a/packages/f2/test/components/interaction/__image_snapshots__/dodge-pan-test-tsx-dodge-pan-pan-1-snap.png b/packages/f2/test/components/interaction/__image_snapshots__/dodge-pan-test-tsx-dodge-pan-pan-1-snap.png index 017a7fadfd368ae50eae7f960951aaabb531126e..b2c67408d17e1a118f8566721b01594d24884d0e 100644 GIT binary patch literal 9525 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 Pp#UTO>sQ`hMn3!xiQ?za literal 9544 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�dL3}V&lJU-&w5uuc>8=@6G{oIES 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 { showCrosshairs crosshairsType="x" /> - + ); diff --git a/site/docs/api/chart/scroll-bar.zh.md b/site/docs/api/chart/scroll-bar.zh.md index 914684bf0..e9ec089b2 100644 --- a/site/docs/api/chart/scroll-bar.zh.md +++ b/site/docs/api/chart/scroll-bar.zh.md @@ -30,7 +30,7 @@ const data = [ ### mode: string -滚动模式,默认为: `'x'`, 可选值: `'x' | 'y' | '['x', 'y']' ` +滚动模式,默认为: `'x'`, 可选值: `'x' | 'y' | '['x', 'y']'` ### range: [0, 1] @@ -56,9 +56,26 @@ const data = [ 默认为 `'bottom'`, 可选值为:`'top' | 'right' | 'bottom' | 'left'` -### margin: number +### style: ShapeProps -滚动条和图表内容间距,默认 `16px` +滚动条和图表内容间距,比如 + +```css +marign: ['10px', '20px'] +marignTop: '10px' +``` + +### backgroud: ShapeProps + +滚动条背景样式 + +> 类型为绘图属性:[线条属性](/zh/docs/tutorial/shape-attrs#线条属性) 线条样式 + +### barStyle: ShapeProps + +滑块样式 + +> 类型为绘图属性:[线条属性](/zh/docs/tutorial/shape-attrs#线条属性) 线条样式 ## demo 示例