Skip to content

Commit

Permalink
feat: 调整tooltip样式和细节
Browse files Browse the repository at this point in the history
  • Loading branch information
zengyue committed Oct 22, 2021
1 parent ee42267 commit 546b43a
Show file tree
Hide file tree
Showing 9 changed files with 327 additions and 111 deletions.
26 changes: 16 additions & 10 deletions packages/f2-next/src/components/geometry/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -78,15 +78,15 @@ class Geometry extends Component implements AttrMixin {
const { chart } = props;

const attrOptions = {};
ATTRS.forEach(attrName => {
ATTRS.forEach((attrName) => {
if (props[attrName]) {
attrOptions[attrName] = this.createAttrOption(props[attrName]);
}
});
this.attrOptions = attrOptions;

// 收集需要创建scale的字段
each(attrOptions, option => {
each(attrOptions, (option) => {
const { field, ...cfg } = option;
chart.setScale(field, cfg);
});
Expand Down Expand Up @@ -131,7 +131,7 @@ class Geometry extends Component implements AttrMixin {
_getGroupScales() {
const { attrs } = this;
const scales = [];
each(GROUP_ATTRS, function(attrName) {
each(GROUP_ATTRS, function (attrName) {
const attr = attrs[attrName];
if (attr) {
const { scale } = attr;
Expand All @@ -151,7 +151,7 @@ class Geometry extends Component implements AttrMixin {

const appendConditions = {};
const names = [];
groupScales.forEach(scale => {
groupScales.forEach((scale) => {
const field = scale.field;
names.push(field);
});
Expand Down Expand Up @@ -279,9 +279,9 @@ class Geometry extends Component implements AttrMixin {
'onPan',
'onPanStart',
'onPanEnd',
].forEach(eventName => {
].forEach((eventName) => {
if (props[eventName]) {
canvas.on(eventName.substr(2).toLowerCase(), ev => {
canvas.on(eventName.substr(2).toLowerCase(), (ev) => {
ev.geometry = this;
props[eventName](ev);
});
Expand Down Expand Up @@ -455,6 +455,7 @@ class Geometry extends Component implements AttrMixin {
const { coord } = props;
const invertPoint = coord.invertPoint(point);
const xScale = this.getXScale();
const yScale = this.getYScale();

// 如果不在coord坐标范围内,直接返回空
if (invertPoint.x < 0 || invertPoint.y < 0) {
Expand All @@ -466,12 +467,17 @@ class Geometry extends Component implements AttrMixin {
if (!value) {
return rst;
}
const { field: xfield } = xScale;
const { field: xField } = xScale;
const { field: yField } = yScale;
for (let i = 0; i < mappedArray.length; i++) {
const data = mappedArray[i];
for (let j = 0, len = data.length; j < len; j++) {
const record = data[j];
const originValue = record[FIELD_ORIGIN][xfield];
const record = {
...data[j],
xField,
yField,
};
const originValue = record[FIELD_ORIGIN][xField];
if (xScale.type === 'timeCat' && toTimeStamp(originValue) === value) {
rst.push(record);
} else if (originValue === value) {
Expand All @@ -494,7 +500,7 @@ class Geometry extends Component implements AttrMixin {
if (!this.getAttrRange('color')) {
colorAttr.setRange(theme.colors);
}
const items = ticks.map(tick => {
const items = ticks.map((tick) => {
const { text, tickValue } = tick;
const color = colorAttr.mapping(tickValue) || theme.colors[0];
return {
Expand Down
3 changes: 2 additions & 1 deletion packages/f2-next/src/components/interval/withInterval.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { mix } from '@antv/util';
import Geometry from '../geometry';
import { convertRect, mappingRect } from './util';

export default View => {
export default (View) => {
return class Interval extends Geometry {
startOnZero = true;

Expand Down Expand Up @@ -55,6 +55,7 @@ export default View => {
const rect = convertRect({ ...position, size, y0 });
mix(position, rect);
mix(record, coord.convertRect(rect));
mix(record, coord.convertPoint(position));
}
}
return mappedArray;
Expand Down
272 changes: 227 additions & 45 deletions packages/f2-next/src/components/tooltip/tooltipView.tsx
Original file line number Diff line number Diff line change
@@ -1,60 +1,242 @@
import Component from '../../base/component';
import { jsx } from '../../jsx';

export default props => {
const { records, context } = props;
if (!records || !records.length) return null;
const { width } = context;
return (
<group
style={{
width,
}}
>
// view 的默认配置
const defaultStyle = {
showTitle: false,
showCrosshairs: false,
crosshairsType: 'y',
crosshairsStyle: {
stroke: 'rgba(0, 0, 0, 0.25)',
lineWidth: '2px',
},
showTooltipMarker: true,
background: {
radius: '2px',
fill: 'rgba(0, 0, 0, 0.65)',
padding: ['6px', '10px'],
},
titleStyle: {
fontSize: '24px',
fill: '#fff',
textAlign: 'start',
textBaseline: 'top',
},
nameStyle: {
fontSize: '24px',
fill: 'rgba(255, 255, 255, 0.65)',
textAlign: 'start',
textBaseline: 'middle',
},
valueStyle: {
fontSize: '24px',
fill: '#fff',
textAlign: 'start',
textBaseline: 'middle',
},
joinString: ': ',
showItemMarker: true,
itemMarkerStyle: {
width: '12px',
radius: '6px',
symbol: 'circle',
lineWidth: '2px',
stroke: '#fff',
},
layout: 'horizontal',
snap: false,
};

function directionEnabled(mode: string, dir: string) {
if (mode === undefined) {
return true;
} else if (typeof mode === 'string') {
return mode.indexOf(dir) !== -1;
}

return false;
}

export default class TooltipView extends Component {
rootRef: any;
itemsRef: any;

constructor(props) {
super(props);
this.rootRef = { current: null };
this.itemsRef = { current: null };
}
didUpdate() {
const { props, rootRef, itemsRef } = this;
const group = rootRef.current;
if (!group) {
return;
}
const { records, coord } = props;
if (!records || !records.length) return null;
const firstRecord = records[0];
const { x } = firstRecord;
const { left: coordLeft, width: coordWidth } = coord;
const { width } = group.get('attrs');
const halfWidth = width / 2;
const moveX = Math.min(
Math.max(x - coordLeft - halfWidth, 0),
coordWidth - halfWidth
);
itemsRef.current.moveTo(moveX, 0);
}
render() {
const { props } = this;
const { records, chart, coord, layout } = props;
const { top: layoutTop } = layout;
if (!records || !records.length) return null;
const {
left: coordLeft,
top: coordTop,
right: coordRight,
bottom: coordBottom,
width: coordWidth,
} = coord;
const firstRecord = records[0];
const { x, y, xField, yField, origin: firstOrigin } = firstRecord;
const yScale = chart.getScale(yField);
const {
background,
showTitle,
titleStyle,
showItemMarker = defaultStyle.showItemMarker,
itemMarkerStyle: customItemMarkerStyle,
nameStyle,
valueStyle,
joinString = defaultStyle.joinString,
showCrosshairs = defaultStyle.showCrosshairs,
crosshairsStyle,
crosshairsType = defaultStyle.crosshairsType,
} = props;
const itemMarkerStyle = {
...customItemMarkerStyle,
...defaultStyle.itemMarkerStyle,
};

return (
<group
ref={this.rootRef}
style={{
display: 'flex',
flexDirection: 'row',
// paddingLeft: '10px',
flex: 1,
}}
attrs={{
radius: '2px',
fill: 'rgba(0, 0, 0, 0.65)',
left: coordLeft,
top: layoutTop,
}}
>
{records.map(record => {
return (
<group
<group
ref={this.itemsRef}
style={{
...defaultStyle.background,
...background,
}}
attrs={{
...defaultStyle.background,
...background,
}}
>
{showTitle ? (
<text
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
// justifyContent: 'center',
padding: ['6px', '10px', '6px', '10px'],
// width: '100px'
marginBottom: '6px',
}}
attrs={{
text: firstOrigin[xField],
fontSize: '24px',
fill: '#fff',
textAlign: 'start',
...titleStyle,
}}
>
<circle
/>
) : null}
<group
style={{
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
}}
>
{records.map((record) => {
const value = yScale.getText(record[yField]);
return (
<group
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
padding: [0, '10px', 0, 0],
}}
>
{showItemMarker ? (
<marker
style={{
width: itemMarkerStyle.width,
marginRight: '6px',
}}
attrs={{
...itemMarkerStyle,
fill: record.color,
}}
/>
) : null}
<text
attrs={{
...defaultStyle.nameStyle,
...nameStyle,
text: value
? `${record[xField]}${joinString}`
: record[xField],
}}
/>
<text
attrs={{
...defaultStyle.valueStyle,
...valueStyle,
text: value,
}}
/>
</group>
);
})}
</group>
</group>
{showCrosshairs ? (
<group>
{directionEnabled(crosshairsType, 'x') ? (
<line
attrs={{
fill: record.color,
r: '6px',
lineWidth: '2px',
stroke: '#fff',
x1: coordLeft,
y1: y,
x2: coordRight,
y2: y,
...defaultStyle.crosshairsStyle,
crosshairsStyle,
}}
/>
<text
style={{
marginLeft: '16px',
}}
) : null}
{directionEnabled(crosshairsType, 'y') ? (
<line
attrs={{
fill: 'black',
text: record['genre'],
x1: x,
y1: coordTop,
x2: x,
y2: coordBottom,
...defaultStyle.crosshairsStyle,
crosshairsStyle,
}}
/>
</group>
);
})}
) : null}
</group>
) : null}
{/* <polygon
attrs={{
...background,
// points
}}
/> */}
</group>
</group>
);
};
);
}
}

0 comments on commit 546b43a

Please sign in to comment.