Skip to content

Commit 411042f

Browse files
markov00markov00
authored
fix(interaction): remove unnecessary elements (#1131)
Remove DOM element when not needed. fix #1074
1 parent 42bac1b commit 411042f

4 files changed

Lines changed: 36 additions & 25 deletions

File tree

‎src/chart_types/xy_chart/renderer/dom/_crosshair.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,7 @@
22
.echCrosshair__cursor,
33
.echCrosshair__crossLine {
44
position: absolute;
5+
top: 0;
6+
left: 0;
57
pointer-events: none;
68
}

‎src/chart_types/xy_chart/renderer/dom/crosshair.tsx‎

Lines changed: 29 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ class CrosshairComponent extends React.Component<CrosshairProps> {
5757

5858
renderCursor() {
5959
const {
60+
zIndex,
6061
theme: {
6162
crosshair: { band, line },
6263
},
@@ -72,15 +73,34 @@ class CrosshairComponent extends React.Component<CrosshairProps> {
7273
const { x1, x2, y1, y2 } = cursorPosition;
7374
const { strokeWidth, stroke, dash } = line;
7475
const strokeDasharray = (dash ?? []).join(' ');
75-
return <line {...{ x1, x2, y1, y2, strokeWidth, stroke, strokeDasharray }} />;
76+
return (
77+
<svg
78+
className="echCrosshair__cursor"
79+
width="100%"
80+
height="100%"
81+
style={{ zIndex: cursorPosition && 'x1' in cursorPosition ? zIndex : undefined }}
82+
>
83+
<line {...{ x1, x2, y1, y2, strokeWidth, stroke, strokeDasharray }} />
84+
</svg>
85+
);
7686
}
7787
const { x, y, width, height } = cursorPosition;
7888
const { fill } = band;
79-
return <rect {...{ x, y, width, height, fill }} />;
89+
return (
90+
<svg
91+
className="echCrosshair__cursor"
92+
width="100%"
93+
height="100%"
94+
style={{ zIndex: cursorPosition && 'x1' in cursorPosition ? zIndex : undefined }}
95+
>
96+
<rect {...{ x, y, width, height, fill }} />;
97+
</svg>
98+
);
8099
}
81100

82101
renderCrossLine() {
83102
const {
103+
zIndex,
84104
theme: {
85105
crosshair: { crossLine },
86106
},
@@ -99,25 +119,18 @@ class CrosshairComponent extends React.Component<CrosshairProps> {
99119
strokeDasharray: (dash ?? []).join(' '),
100120
};
101121

102-
return <line {...cursorCrossLinePosition} {...style} />;
122+
return (
123+
<svg className="echCrosshair__crossLine" width="100%" height="100%" style={{ zIndex }}>
124+
<line {...cursorCrossLinePosition} {...style} />
125+
</svg>
126+
);
103127
}
104128

105129
render() {
106-
const { zIndex, cursorPosition } = this.props;
107130
return (
108131
<>
109-
<svg
110-
className="echCrosshair__cursor"
111-
width="100%"
112-
height="100%"
113-
style={{ zIndex: cursorPosition && 'x1' in cursorPosition ? zIndex : undefined }}
114-
>
115-
{this.renderCursor()}
116-
</svg>
117-
118-
<svg className="echCrosshair__crossLine" width="100%" height="100%" style={{ zIndex }}>
119-
{this.renderCrossLine()}
120-
</svg>
132+
{this.renderCursor()}
133+
{this.renderCrossLine()}
121134
</>
122135
);
123136
}

‎src/components/__snapshots__/chart.test.tsx.snap‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -66,10 +66,7 @@ exports[`Chart should render the legend name test 1`] = `
6666
<ChartContainer getChartContainerRef={[Function (anonymous)]} forwardStageRef={{...}} status=\\"Initialized\\" initialized={true} isChartEmpty={false} pointerCursor=\\"default\\" isBrushingAvailable={false} isBrushing={false} internalChartRenderer={[Function (anonymous)]} settings={{...}} onPointerMove={[Function (anonymous)]} onMouseUp={[Function (anonymous)]} onMouseDown={[Function (anonymous)]} onKeyPress={[Function (anonymous)]}>
6767
<div className=\\"echChartPointerContainer\\" style={{...}} onMouseMove={[Function (anonymous)]} onMouseLeave={[Function (anonymous)]} onMouseDown={[Function (anonymous)]} onMouseUp={[Function (anonymous)]}>
6868
<Connect(Crosshair)>
69-
<Crosshair theme={{...}} chartRotation={0} cursorPosition={[undefined]} cursorCrossLinePosition={[undefined]} tooltipType=\\"vertical\\" fromExternalEvent={[undefined]} zIndex={0} dispatch={[Function: dispatch]}>
70-
<svg className=\\"echCrosshair__cursor\\" width=\\"100%\\" height=\\"100%\\" style={{...}} />
71-
<svg className=\\"echCrosshair__crossLine\\" width=\\"100%\\" height=\\"100%\\" style={{...}} />
72-
</Crosshair>
69+
<Crosshair theme={{...}} chartRotation={0} cursorPosition={[undefined]} cursorCrossLinePosition={[undefined]} tooltipType=\\"vertical\\" fromExternalEvent={[undefined]} zIndex={0} dispatch={[Function: dispatch]} />
7370
</Connect(Crosshair)>
7471
<Connect(XYChart) forwardStageRef={{...}}>
7572
<XYChart forwardStageRef={{...}} initialized={true} isChartEmpty={false} debug={true} geometries={{...}} geometriesIndex={{...}} theme={{...}} chartContainerDimensions={{...}} highlightedLegendItem={[undefined]} rotation={0} renderingArea={{...}} chartTransform={{...}} axesSpecs={{...}} perPanelAxisGeoms={{...}} perPanelGridLines={{...}} axesStyles={{...}} annotationDimensions={{...}} annotationSpecs={{...}} panelGeoms={{...}} seriesTypes={{...}} a11ySettings={{...}} onChartRendered={[Function (anonymous)]}>
@@ -92,11 +89,7 @@ exports[`Chart should render the legend name test 1`] = `
9289
</XYChart>
9390
</Connect(XYChart)>
9491
<Connect(Tooltip) getChartContainerRef={[Function (anonymous)]}>
95-
<Tooltip getChartContainerRef={[Function (anonymous)]} visible={false} zIndex={0} info={{...}} position={{...}} headerFormatter={[undefined]} settings={{...}} rotation={0} chartId=\\"chart1\\" backgroundColor=\\"transparent\\" onPointerMove={[Function (anonymous)]}>
96-
<TooltipPortal scope=\\"MainTooltip\\" zIndex={100} anchor={{...}} settings={{...}} chartId=\\"chart1\\" visible={false}>
97-
<Portal containerInfo={{...}} />
98-
</TooltipPortal>
99-
</Tooltip>
92+
<Tooltip getChartContainerRef={[Function (anonymous)]} visible={false} zIndex={0} info={{...}} position={{...}} headerFormatter={[undefined]} settings={{...}} rotation={0} chartId=\\"chart1\\" backgroundColor=\\"transparent\\" onPointerMove={[Function (anonymous)]} />
10093
</Connect(Tooltip)>
10194
<Connect(Annotations) getChartContainerRef={[Function (anonymous)]} chartAreaRef={{...}}>
10295
<Annotations getChartContainerRef={[Function (anonymous)]} chartAreaRef={{...}} isChartEmpty={false} chartDimensions={{...}} annotationDimensions={{...}} annotationSpecs={{...}} tooltipState={{...}} chartId=\\"chart1\\" zIndex={0} onPointerMove={[Function (anonymous)]} onDOMElementLeave={[Function (anonymous)]} onDOMElementEnter={[Function (anonymous)]}>

‎src/components/tooltip/tooltip.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -204,6 +204,9 @@ const TooltipComponent = ({
204204
};
205205
}, [settings, chartRef, rotation]);
206206

207+
if (!visible) {
208+
return null;
209+
}
207210
return (
208211
<TooltipPortal
209212
scope="MainTooltip"

0 commit comments

Comments
 (0)