Skip to content

Commit

Permalink
feat(tooltip): 调整snap和辅助线渲染顺序,并使得snap可自动设置填充色 (#1459)
Browse files Browse the repository at this point in the history
  • Loading branch information
mshmyw authored Apr 28, 2022
1 parent a46d888 commit 46fb275
Show file tree
Hide file tree
Showing 3 changed files with 68 additions and 10 deletions.
21 changes: 11 additions & 10 deletions packages/f2/src/components/tooltip/tooltipView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -371,6 +371,16 @@ export default class TooltipView extends Component {
{showTooltipMarker ? (
<RenderItemMarker coord={coord} context={context} records={records} />
) : null}
{/* 辅助线 */}
{showCrosshairs ? (
<RenderCrosshairs
chart={chart}
coord={coord}
records={records}
crosshairsType={crosshairsType}
crosshairsStyle={{...defaultStyle.crosshairsStyle, ...crosshairsStyle}}
/>
) : null}
{/* 辅助点 */}
{snap
? records.map((item) => {
Expand All @@ -382,23 +392,14 @@ export default class TooltipView extends Component {
y,
r: '6px',
stroke: color,
fill: color,
...shape,
...tooltipMarkerStyle,
}}
/>
);
})
: null}
{/* 辅助线 */}
{showCrosshairs ? (
<RenderCrosshairs
chart={chart}
coord={coord}
records={records}
crosshairsType={crosshairsType}
crosshairsStyle={{...defaultStyle.crosshairsStyle, ...crosshairsStyle}}
/>
) : null}
</group>
{/* X 轴辅助信息 */}
{showXTip && (
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
57 changes: 57 additions & 0 deletions packages/f2/test/components/line/radar.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,34 @@ const data1 = [
},
];

const data2 = [
...data1,
{
time: '10-01',
value: 15380,
name: '本店',
},
{
time: '12-02',
value: 13661,
name: '本店',
},
{
time: '12-03',
value: 16054,
name: '本店',
},
{
time: '12-04',
value: 12345,
name: '本店',
},
{
time: '12-05',
value: 11345,
name: '本店',
},
];
describe('雷达图', () => {
describe('面积雷达图', () => {
it('面积雷达图图', async () => {
Expand Down Expand Up @@ -221,5 +249,34 @@ describe('雷达图', () => {
await delay(1000);
expect(context).toMatchImageSnapshot();
});

it('雷达图交互:选中维度的 snap 点设置不同色', async () => {
const context = createContext('雷达图交互:选中维度的 snap 点设置不同色');
const { props } = (
<Canvas context={context} pixelRatio={1}>
<Chart data={data2} coord="polar">
<Axis field="time" grid="line" />
<Axis field="value" grid="line" style={{ label: null }} />
<Line x="time" y="value" color="name" />
<Point x="time" y="value" color="name" />
<Tooltip custom={true} alwaysShow defaultItem={data2[0]} snap showCrosshairs
// tooltipMarkerStyle中不设置fill时,默认使用record 记录中color自动填充
tooltipMarkerStyle = {{
r: 5,
stroke: '#fff',
lineWidth: '4px',
}}
/>
</Chart>
</Canvas>
);

const canvas = new Canvas(props);
canvas.render();

await delay(1000);
expect(context).toMatchImageSnapshot();
});

});
});

0 comments on commit 46fb275

Please sign in to comment.